@oliasoft-open-source/charts-library 2.1.0 → 2.1.2

package/src/components/pie-chart/pie-chart.stories.jsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { PieChart } from './pie-chart';
+
+const labels1 = ['label 1', 'label 2', 'label 3'];
+const dataset1 = { label: 'data1', data: [3, 8, 7] };
+const dataset2 = { label: 'data2', data: [1, 2, 3] };
+const dataset3 = { label: 'data3', data: [5, 0, 4] };
+
+const offsetDataset = {
+  label: 'spacing data',
+  offset: 40,
+  data: [3, 8, 7],
+};
+
+const hoverOffsetDataset = {
+  label: 'hover data',
+  data: [3, 8, 7],
+  hoverOffset: 40,
+};
+
+const datasetDatalabels = {
+  label: 'data',
+  data: [
+    {
+      value: 210,
+      label: 'label',
+    },
+    {
+      value: 333,
+      label: 'labal',
+    },
+    {
+      value: 248,
+      label: 'lebel',
+    },
+  ],
+};
+const datasetNoDataLabels = {
+  label: 'data',
+  data: [210, 333, 248],
+};
+
+const singleChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+};
+
+const multiplePieData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+};
+const stackedMultiplePieData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Stacked',
+    graph: { stacked: true },
+  },
+};
+
+const dataLabelsChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With custom datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+const dataLabelsNumberChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetNoDataLabels],
+  },
+  options: {
+    title: 'With value as datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+
+const dataLabelssTooltips = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With datalabels in tooltips',
+    tooltip: {
+      showLabelsInTooltips: true,
+    },
+  },
+};
+
+const darkMode = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Dark mode',
+    axes: {
+      x: [
+        {
+          label: 'X',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: true,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 6,
+        },
+      ],
+    },
+  },
+};
+
+const hoverOffsetChart = {
+  data: {
+    labels: labels1,
+    datasets: [hoverOffsetDataset],
+  },
+  options: { title: 'Hover offset' },
+};
+
+const offsetChart = {
+  data: {
+    labels: labels1,
+    datasets: [offsetDataset],
+  },
+  options: { title: 'Segment offset' },
+};
+
+const animatedChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    chartStyling: { performanceMode: false },
+  },
+};
+
+const doughnutPercentage = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Cutout 50%',
+    graph: { cutout: '50%' },
+  },
+};
+
+const doughnutNumber = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Cutout 20 pixels',
+    graph: { cutout: 20 },
+  },
+};
+
+export default {
+  title: 'PieChart',
+  component: PieChart,
+  args: {
+    chart: singleChart,
+  },
+};
+
+const Template = (args) => {
+  return (
+    <PieChart
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
+};
+export const Default = Template.bind({});
+
+export const MultipleSets = Template.bind({});
+MultipleSets.args = { chart: multiplePieData };
+
+export const MultipleSetsStacked = Template.bind({});
+MultipleSetsStacked.args = { chart: stackedMultiplePieData };
+
+export const Datalabels = Template.bind({});
+Datalabels.args = { chart: dataLabelsChart };
+
+export const DatalabelsValues = Template.bind({});
+DatalabelsValues.args = { chart: dataLabelsNumberChart };
+
+export const DatalabelsInTooltips = Template.bind({});
+DatalabelsInTooltips.args = { chart: dataLabelssTooltips };
+
+export const Animated = Template.bind({});
+Animated.args = { chart: animatedChart };
+
+export const Doughnut = Template.bind({});
+Doughnut.args = { chart: doughnutPercentage };
+
+export const DoughnutFixedCutout = Template.bind({});
+DoughnutFixedCutout.args = { chart: doughnutNumber };
+
+export const HoverOffset = Template.bind({});
+HoverOffset.args = { chart: hoverOffsetChart };
+
+export const SegmentOffset = Template.bind({});
+HoverOffset.args = { chart: offsetChart };
+
+export const DarkMode = Template.bind({});
+DarkMode.args = { chart: darkMode };

package/src/components/scatter-chart/{scatter.stories.jsx → scatter-chart.stories.jsx}

@@ -1,10 +1,7 @@
 import React from 'react';
-import { Container } from '../../helpers/container';
 import ScatterChart from './scatter-chart';
 
 const style = {
-  height: '1000px',
-  width: '1000px',
   colorOrange: '#ED9860',
   colorLightGray: '#C8C8C8',
   colorDarkGray: '#595959',
@@ -114,83 +111,32 @@ const chartLegendRight = {
   },
 };
 
-const chartResponsive = {
-  data: {
-    datasets: datasetMultiLines,
-  },
-  options: {
-    responsive: true,
-    maintainAspectRatio: false,
-  },
-};
 export default {
-  title: 'Scatter Chart',
+  title: 'ScatterChart',
   component: ScatterChart,
+  args: {
+    chart: chartDefault,
+  },
+};
+
+const Template = (args) => {
+  return (
+    <ScatterChart
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
 };
+export const Default = Template.bind({});
+
+export const Linear = Template.bind({});
+Linear.args = { chart: chartWithLine };
+
+export const MultiLines = Template.bind({});
+MultiLines.args = { chart: multiLines };
+
+export const Reverse = Template.bind({});
+Reverse.args = { chart: chartReverse };
 
-export const Default = () => (
-  <Container style={style}>
-    <ScatterChart chart={chartDefault} />
-  </Container>
-);
-
-export const Linear = () => (
-  <Container style={style}>
-    <ScatterChart chart={chartWithLine} />
-  </Container>
-);
-
-export const MultiLines = () => (
-  <Container style={style}>
-    <ScatterChart chart={multiLines} />
-  </Container>
-);
-
-export const Reverse = () => (
-  <Container style={style}>
-    <ScatterChart chart={chartReverse} />
-  </Container>
-);
-
-export const LegendRight = () => (
-  <Container style={style}>
-    <ScatterChart chart={chartLegendRight} />
-  </Container>
-);
-
-export const Responsive = () => (
-  <Container>
-    <div
-      style={{
-        width: '50%',
-        height: '50%',
-      }}
-    >
-      <ScatterChart
-        chart={{
-          data: multiLines.data,
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-          },
-        }}
-      />
-    </div>
-
-    <div
-      style={{
-        width: '50%',
-        height: '50%',
-      }}
-    >
-      <ScatterChart
-        chart={{
-          data: multiLines.data,
-          options: {
-            responsive: true,
-          },
-        }}
-      />
-    </div>
-  </Container>
-);
+export const LegendRight = Template.bind({});
+LegendRight.args = { chart: chartLegendRight };

package/src/helpers/chart-consts.js

@@ -80,3 +80,5 @@ export const ANIMATION_DURATION = {
 };
 
 export const DEFAULT_CHART_NAME = 'new_chart';
+
+export const CUSTOM_LEGEND_PLUGIN_NAME = 'htmlLegend';

package/src/helpers/chart-interface.ts

@@ -1,3 +1,5 @@
+import { Plugin } from "chart.js";
+
 export interface IChartAnnotationsData {
     annotationAxis: 'x' | 'y';
     label: string;
@@ -16,15 +18,22 @@ export interface IChartStyling {
     width: number | string;
     height: number | string;
     maintainAspectRatio: boolean;
+    squareAspectRatio?: boolean;
     staticChartHeight: boolean;
     performanceMode: boolean;
     darkMode: boolean;
 }
 
+export interface ICustomLegend {
+    customLegendPlugin: Plugin;
+    customLegendContainerID: string,
+}
+
 export interface IChartLegend {
     display: boolean;
     position: 'top' | 'bottom' | 'right';
     align: 'start' | 'center' | 'end';
+    customLegend?: ICustomLegend;
 }
 
 export interface IChartInteractions {

package/src/helpers/chart-utils.js

@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
+  CUSTOM_LEGEND_PLUGIN_NAME,
   DEFAULT_CHART_NAME,
   DEFAULT_DARK_MODE_COLOR,
   LEGEND_LABEL_BOX_SIZE,
@@ -11,13 +12,25 @@ import { AxisType, ChartDirection, Position } from './enums';
 /**
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
  * import('../components/line-chart/line-chart.interface').ILineChartGraph } graph - graph data from chart options
+ * @param {import('../helpers/chart-interface').IChartLegend} legend
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  * @return {[]}
  */
-export const getPlugins = (graph) => {
+export const getPlugins = (graph, legend, state = null) => {
   let plugins = [];
   if (graph.showMinorGridlines) {
     plugins.push(chartMinorGridlinesPlugin);
   }
+  const customLegend = legend?.customLegend;
+  if (
+    customLegend?.customLegendPlugin &&
+    customLegend?.customLegendContainerID
+  ) {
+    plugins.push({
+      id: CUSTOM_LEGEND_PLUGIN_NAME,
+      ...legend.customLegend.customLegendPlugin,
+    });
+  }
   return plugins;
 };
 
@@ -114,7 +127,10 @@ export const getAxisPosition = (axisType, i) => {
  * @return {string} - class name
  */
 export const getClassName = (chartStyling, styles) => {
-  const { width, height, staticChartHeight } = chartStyling;
+  const { width, height, staticChartHeight, squareAspectRatio } = chartStyling;
+  const squareAspectRatioStyle = squareAspectRatio
+    ? styles.squareAspectRatio
+    : '';
   let heightStyles = '';
   if (width || height) {
     heightStyles = '';
@@ -123,7 +139,7 @@ export const getClassName = (chartStyling, styles) => {
       ? styles?.fixedHeight
       : styles?.stretchHeight;
   }
-  return cx(styles.chart, heightStyles);
+  return cx(styles.chart, heightStyles, squareAspectRatioStyle);
 };
 
 /**
@@ -138,7 +154,11 @@ export const getLegend = (options, clickHandler, state = null) => {
   const { legend, chartStyling } = options;
   return {
     position: legend.position || Position.Top,
-    display: state ? state.legendEnabled : legend.display,
+    display: !legend?.customLegend?.customLegendPlugin
+      ? state
+        ? state.legendEnabled
+        : legend.display
+      : false,
     align: legend.align,
     labels: {
       boxHeight: LEGEND_LABEL_BOX_SIZE,

package/src/helpers/get-custom-legend-plugin-example.js

@@ -0,0 +1,81 @@
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = 0;
+    listContainer.style.padding = 0;
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+/**
+ * Gets an example custom legend plugin for use in storybook.
+ * @param {string} customLegendContainerID - the id of the div container to put the generated legend in
+ */
+export const getCustomLegendPlugin = (customLegendContainerID) => ({
+  afterUpdate(chart, _args, _options) {
+    const ul = getOrCreateLegendList(chart, customLegendContainerID);
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach((item) => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.height = '20px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '20px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      textContainer.style.color = item.fontColor;
+      textContainer.style.margin = 0;
+      textContainer.style.padding = 0;
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  },
+});

package/src/components/bar-chart/charts.stories.jsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { BarChart } from './bar-chart';
-import { Container } from '../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const chart = {
-  data: {
-    labels: ['monday', 'tuesday', 'wednesday', 'friday'],
-    datasets: [
-      {
-        label: 'some data',
-        borderColor: ['red', 'purple', 'black', 'rgba(255,255,64,0.3)'],
-        backgroundColor: [
-          'white',
-          'transparent',
-          'red',
-          'rgba(255,255,64,0.9)',
-        ],
-        borderWidth: 4,
-        borderRadius: 50,
-        borderSkipped: false,
-        data: [[20, 40], 30, [-10, 11], 42],
-        stack: 1,
-      },
-      {
-        label: 'some other data',
-        borderColor: ['purple', 'orange'],
-        backgroundColor: ['orange', 'purple'],
-        borderWidth: 10,
-        borderSkipped: false,
-        data: [1, 8, 22, 19],
-        stack: 1,
-      },
-      {
-        label: 'some otter data',
-        yAxisID: 'y2',
-        data: [10, 20, 22, 19],
-        stack: 2,
-      },
-    ],
-  },
-  options: {
-    title: 'Look at those bars!',
-    axes: {
-      x: [
-        {
-          label: 'x data',
-          gridLines: {
-            drawOnChartArea: false,
-          },
-          unit: 'day',
-        },
-      ],
-      y: [
-        {
-          label: 'y data',
-          position: 'right',
-          color: '#a30125',
-          unit: 'm',
-        },
-        {
-          position: 'left',
-          color: '#011fa3',
-          gridLines: {
-            drawOnChartArea: false,
-          },
-          unit: 'otters',
-          stepSize: 1,
-        },
-      ],
-    },
-    additionalAxesOptions: {
-      beginAtZero: true,
-      stacked: true,
-      reverse: true,
-      suggestedMin: -15,
-    },
-    chartStyling: {
-      width: 1200,
-      height: 800,
-      performanceMode: false,
-    },
-    graph: {
-      showDataLabels: true,
-      showMinorGridlines: true,
-    },
-    annotations: {
-      showAnnotations: true,
-      controlAnnotation: true,
-      annotationsData: [
-        {
-          annotationAxis: 'y',
-          label: '0',
-          value: 0,
-          color: 'rgba(128, 32, 196, 0.5)',
-        },
-      ],
-    },
-    legend: {
-      position: 'top',
-      align: 'start',
-    },
-  },
-};
-
-export const BarChartKitchenSink = () => (
-  <Container style={style}>
-    <BarChart chart={chart} />
-  </Container>
-);
-
-export default {
-  title: 'Bar Chart Kitchen Sink',
-  component: BarChartKitchenSink,
-};