From c8dfce07ecc5f3c6ac5f07fb9b9bc4f6dbbf75dc Mon Sep 17 00:00:00 2001 From: Jacques Lebourgeois Date: Fri, 15 Mar 2024 16:56:35 +0100 Subject: [PATCH 1/4] A solution for displaying a series with two colours #92 --- docs/use_cases/index.html | 17 ++ docs/use_cases/two-colors-serie.html | 245 +++++++++++++++++++++++++++ 2 files changed, 262 insertions(+) create mode 100644 docs/use_cases/two-colors-serie.html diff --git a/docs/use_cases/index.html b/docs/use_cases/index.html index cdaec7d1..33889d42 100644 --- a/docs/use_cases/index.html +++ b/docs/use_cases/index.html @@ -87,6 +87,23 @@
Confine tooltip
+ +
+
+
+
Two colours for one series
+

+ Highlight values in a series with a different colour. +

+
+ +
+ Go to example +
+
+
diff --git a/docs/use_cases/two-colors-serie.html b/docs/use_cases/two-colors-serie.html new file mode 100644 index 00000000..3aaabcfd --- /dev/null +++ b/docs/use_cases/two-colors-serie.html @@ -0,0 +1,245 @@ + + + + + + Examples - Specific use cases + + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
Two colours for one series example
+

+ When representing data on a bar chart, it is possible to want to + represent this data with a different colour depending on a condition + on the value. For example, green for a target achieved, red + otherwise. +

+

You would then need to be able to have:

+
    +
  • both colours in the legend
    • +
  • + the colour associated with the current value in the tooltop or + popover. +
    • +
+ +

+ For this example, we have chosen to put the data in two series + depending on whether or not the objective has been achieved. In this + way, the two colours are clearly visible both on the graph and in + the legend. +

+

+ On the other hand, this requires us to filter the values displayed + in the tooltip so as not to display the series of a target that has + not been reached when it has been reached and vice versa. +

+

+ This filter is created using getPopupContentValue() callback of the + externalizePopover() feature that allow us to change the displayed + value, and to send back undefined if we don't want the value to be + displayed : + + 

+                themeManager.externalizePopover(undefined, {
+                  ...ODSCharts.ODSChartsPopoverManagers.NONE,
+                  getPopupContentValue: ({ seriesName, itemValue }) =>
+                    itemValue ? Math.round(itemValue * 100) / 100 + '$' : undefined,
+                });                
+
+ +

+ +
+
+
+

Title

+
Sub-Title
+
+
+
+
+
+
+
+ + +
+
+ +
+ + + + From 3a3158b0a8e5a30f12e91eaca9253ebf99fd3034 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 21 Mar 2024 12:45:19 +0100 Subject: [PATCH 2/4] Minor fixes to take into account previously merged PRs --- docs/use_cases/confine-tooltip.html | 45 ++------- docs/use_cases/two-colors-serie.html | 136 ++++++++------------------- 2 files changed, 49 insertions(+), 132 deletions(-) diff --git a/docs/use_cases/confine-tooltip.html b/docs/use_cases/confine-tooltip.html index 1052b61c..66312216 100644 --- a/docs/use_cases/confine-tooltip.html +++ b/docs/use_cases/confine-tooltip.html @@ -22,20 +22,11 @@
-