From 2b6b650952eba7491aa6314fdf885437f2ee02fd Mon Sep 17 00:00:00 2001 From: Jacques Lebourgeois Date: Fri, 12 Apr 2024 18:07:26 +0200 Subject: [PATCH] Use the formatter function of the Apache ECharts tooltp in the ods-charts tooltipSuggest a new feature #194 --- docs/use_cases/add-unit.html | 180 +++++++++++++++++++++++++ docs/use_cases/index.html | 14 ++ docs/use_cases/two-colors-serie.html | 157 ++++++++++++++++----- src/theme/ods-chart-theme.ts | 2 + src/theme/popover/ods-chart-popover.ts | 13 ++ 5 files changed, 332 insertions(+), 34 deletions(-) create mode 100644 docs/use_cases/add-unit.html diff --git a/docs/use_cases/add-unit.html b/docs/use_cases/add-unit.html new file mode 100644 index 0000000..a73ff18 --- /dev/null +++ b/docs/use_cases/add-unit.html @@ -0,0 +1,180 @@ + + + + + + Examples - Specific use cases - Add unit + + + + + + + + + + + + + + + + + + +
+ +
+
+
+

Add unit

+
+
+
+
+
+
Add unit in both Y axis and tooltip display
+

+ Apache Echarts offer the availbility to add a unit formatter. +

+

+ There are two function to provide. One for Y axis and one for the tooltip: + + 

+                yAxis: {
+                  axisLabel: {
+                    formatter: "{value} °C" 
+                  }
+                },
+                tooltip: {
+                  formatter: function (params) {
+                    return (
+                      Math.round(params[0].value * 100) / 100 + " °C"
+                    );
+                  }
+                },  
+
+ +

+
+
+
+

Title

+
Sub-Title
+
+
+
+
+
+
+
+ +
+
+ +
+ + + + + diff --git a/docs/use_cases/index.html b/docs/use_cases/index.html index cc986bb..b30e98c 100644 --- a/docs/use_cases/index.html +++ b/docs/use_cases/index.html @@ -70,6 +70,20 @@
Two colours for one series
+ +
+
+
+
Add unit
+

+ Add a unit on Y axis and in the tooltip. +

+
+
+ Go to example +
+
+
diff --git a/docs/use_cases/two-colors-serie.html b/docs/use_cases/two-colors-serie.html index 99b30e2..bf286b6 100644 --- a/docs/use_cases/two-colors-serie.html +++ b/docs/use_cases/two-colors-serie.html @@ -5,29 +5,69 @@ Examples - Specific use cases - Two colours for one series - - - + + + - - - - - - - - + + + + + + + +
-