There are use-cases where we want to provide options to viewers of charts generated by the Charts module. I propose we create a widget that can be enabled and let users change the color of their series. It could work similar to this:

https://jsfiddle.net/BlackLabel/r23yt0b6/

And could be incorporated similarly to how the Charts Debug works.

CommentFileSizeAuthor
#6 3291186-color-switcher-6.patch15.65 KBandileco
#4 3291186-color-switcher-3.patch15.19 KBandileco
#3 Screen Shot 2022-06-24 at 11.33.36 PM.png612.56 KBandileco
#3 Screen Shot 2022-06-24 at 11.33.19 PM.png631.55 KBandileco
#3 3291186-color-switcher-2.patch14.35 KBandileco

Issue fork charts-3291186

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

andileco created an issue. See original summary.

andileco credited nikathone.

andileco’s picture

andileco commented
Status: Active » Needs review
StatusFileSize
new 3291186-color-switcher-2.patch14.35 KB
new Screen Shot 2022-06-24 at 11.33.19 PM.png631.55 KB
new Screen Shot 2022-06-24 at 11.33.36 PM.png612.56 KB

Here's a test of this that works with Highcharts.

Color changer default:
Shows a chart with blue and green series

After selecting red in the color changer:
Now the blue color is red

andileco’s picture

andileco commented
StatusFileSize
new 3291186-color-switcher-3.patch15.19 KB

Not sure why the last patch failed. Trying again.

nikathone’s picture

nikathone
Primary language Swahili
Location Ontario
commented
Status: Needs review » Needs work 
  1. +++ b/modules/charts_highcharts/charts_highcharts.libraries.yml
@@ -41,3 +41,12 @@ highcharts_exporting:
+    js/charts_highcharts_color_changer.js: { }

    I will name this js file color_changer.js 

  2. +++ b/modules/charts_highcharts/js/charts_highcharts_color_changer.js
@@ -0,0 +1,42 @@
+        if (chartMetadata.chart_type === 'pie') {
+          chart.series[0].data[chartMetadata.series_index].color = '';
+          chart.series[0].data[chartMetadata.series_index].update({
+            color: event.target.value
+          });
+        }
+        else {
+          if (chartMetadata.chart_type === 'gauge') {
+            chart.yAxis[0].plotLinesAndBands[0].options.color = event.target.value;
+            chart.yAxis[0].update();
+          }
+          else {
+            chart.series[chartMetadata.series_index].update({
+              color: event.target.value
+            });
+          }
+        }

    I will probably change this into a switch statement to make it easier to update in the if we need to add another condition. Something like:

    switch (chartMetadata.chart_type) {
  case 'pie':
    chart.series[0].data[chartMetadata.series_index].update({
      color: event.target.value
    });
    break;
  case 'gauge':
    chart.yAxis[0].plotLinesAndBands[0].options.color = event.target.value;
    chart.yAxis[0].update();
    break;
  default:
    chart.series[chartMetadata.series_index].update({
      color: event.target.value
    });
}

  3. +++ b/modules/charts_highcharts/js/charts_highcharts_color_changer.js
@@ -0,0 +1,42 @@
+          chart.series[0].data[chartMetadata.series_index].color = '';

    This line is probably not needed. 

  4. +++ b/modules/charts_highcharts/src/Form/ColorChanger.php
@@ -0,0 +1,100 @@
+    $form['color_changer_fieldset'] = [

    naming nit pick: maybe wrapper instead of color_changer_fieldset.

Will add more review shortly.

andileco’s picture

andileco commented
Status: Needs work » Needs review
StatusFileSize
new 3291186-color-switcher-6.patch15.65 KB

Fixed the issues above (with the exception of #3 - that line was necessary in my testing); also addressed some code standard issues.

  • andileco committed 5a16de9 on 5.0.x 
    Issue #3291186 by andileco, nikathone: Front-end Color Switcher
andileco’s picture

andileco commented
Status: Needs review » Fixed

Also added color_changer: false to install/charts.settings.yml and committed.

nikathone opened merge request !34

  • andileco committed 7f79912 on 5.0.x authored by nikathone 
    Issue #3291186 by andileco, nikathone: Front-end Color Switcher

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.