@oliasoft-open-source/charts-library 2.0.0

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

@@ -0,0 +1,477 @@
+import React, { useRef, useState } from 'react';
+import cx from 'classnames';
+import {
+  ArcElement,
+  CategoryScale,
+  Chart as ChartJS,
+  defaults,
+  Filler,
+  Legend,
+  LinearScale,
+  LogarithmicScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import dataLabelsPlugin from 'chartjs-plugin-datalabels';
+import { Pie } from 'react-chartjs-2';
+
+import styles from './pie-chart.module.less';
+import { colors, colorsDarkmode, generateRandomColor } from './pie-chart-utils';
+import { getDefaultProps, PieChartPropTypes } from './pie-chart-prop-types';
+import {
+  DEFAULT_COLOR,
+  DEFAULT_DARK_MODE_BORDER_COLOR,
+  DEFAULT_DARK_MODE_COLOR,
+} from '../../helpers/chart-consts';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  LogarithmicScale,
+  ArcElement,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+);
+
+defaults.font.size = 13;
+defaults.color = DEFAULT_COLOR;
+defaults.font.family = '"Lato", sans-serif';
+defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
+defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
+
+/**
+ * this is a pie chart component
+ * @param {} props
+ * @param {import('./pie-chart.interface').IPieChartProps} IPieChartProps
+ * ./pie-chart.interface
+ */
+const PieChart = (props) => {
+  const chart = getDefaultProps(props);
+  const chartRef = useRef(null);
+  const [pointHover, setPointHover] = useState(false);
+
+  const generateDatasets = (datasets) => {
+    const copyDataset = JSON.parse(JSON.stringify(datasets));
+
+    if (chart.options.graph.stacked) {
+      const generatedDataset = {
+        label: copyDataset[0].label,
+        backgroundColor: [],
+        borderColor: [],
+        borderWidth: parseFloat(copyDataset[0].borderWidth) || '1',
+        data: [],
+      };
+      chart.data.labels.map((label, labelIndex) => {
+        copyDataset.map((arc, arcIndex) => {
+          generatedDataset.data.push(arc.data[labelIndex]);
+          const { backgroundColor } = arc;
+          const { borderColor } = arc;
+          generatedDataset.backgroundColor.push(
+            (Array.isArray(backgroundColor)
+              ? backgroundColor[labelIndex % borderColor.length]
+              : backgroundColor) ||
+              colors[labelIndex] + `${99 - 10 * arcIndex}`,
+          );
+          generatedDataset.borderColor.push(
+            (Array.isArray(borderColor)
+              ? borderColor[labelIndex % borderColor.length]
+              : borderColor) || colors[labelIndex],
+          );
+        });
+      });
+      return [generatedDataset];
+    }
+
+    const generatedDatasets = copyDataset.map((pieDataset, index) => {
+      const borderWidth = parseFloat(pieDataset.borderWidth) || '1';
+      const colorLightmode = pieDataset.data.map(
+        (pie, i) => colors[i] || generateRandomColor(),
+      );
+      const colorDarkmode = pieDataset.data.map(
+        (pie, i) => colorsDarkmode[i] || generateRandomColor(),
+      );
+      const color = chart.options.chartStyling.darkMode
+        ? colorDarkmode
+        : colorLightmode;
+      const borderColor = pieDataset.borderColor || color;
+      const backgroundColor =
+        pieDataset.backgroundColor ||
+        color.map((col) => col + `${99 - 11 * index}`);
+
+      return {
+        ...pieDataset,
+        borderWidth,
+        borderColor,
+        backgroundColor,
+      };
+    });
+    return generatedDatasets;
+  };
+
+  const generatedDatasets = generateDatasets(chart.data.datasets);
+
+  const getTitle = () => {
+    return chart.options.title !== ''
+      ? {
+          display: true,
+          text: chart.options.title,
+          color: chart.options.chartStyling.darkMode
+            ? defaults.darkModeColor
+            : undefined,
+        }
+      : {};
+  };
+
+  const legendClick = (e, legendItem, legend) => {
+    const chartInstance = legend.chart;
+    const { datasets } = chartInstance.data;
+    const { index } = legendItem;
+
+    if (chart.options.graph.stacked) {
+      if (chart.options.legend.useDataset) {
+        for (
+          let i = 0;
+          i < chartInstance.config._config.data.datasets[0].data.length;
+          i++
+        ) {
+          if (i % chart.data.datasets.length === index) {
+            const meta = chartInstance.getDatasetMeta(0);
+            const arc = meta.data[i];
+            arc.hidden = !arc.hidden;
+          }
+        }
+      } else {
+        for (
+          let i = 0;
+          i < chartInstance.config._config.data.datasets[0].data.length;
+          i++
+        ) {
+          if (parseInt(i / chart.data.datasets.length) === index) {
+            const meta = chartInstance.getDatasetMeta(0);
+            const arc = meta.data[i];
+            arc.hidden = !arc.hidden;
+          }
+        }
+      }
+    } else {
+      if (chart.options.legend.useDataset) {
+        const meta = chartInstance.getDatasetMeta(index);
+        meta.hidden = !meta.hidden;
+      } else {
+        if (datasets.length > 1) {
+          for (let i = 0; i < chart.data.datasets.length; i++) {
+            const meta = chartInstance.getDatasetMeta(i);
+
+            const arc = meta.data[index];
+            arc.hidden = !arc.hidden;
+          }
+        } else {
+          const meta = chartInstance.getDatasetMeta(0);
+          const arc = meta.data[index];
+          arc.hidden = !arc.hidden;
+        }
+      }
+    }
+
+    if (chart.options.interactions.onLegendClick)
+      chart.options.interactions.onLegendClick(
+        legendItem?.text,
+        legendItem.hidden,
+      );
+
+    chartInstance.update();
+  };
+
+  const onClick = (evt, elements, chartInstance) => {
+    chartInstance.resetZoom();
+    // TODO: Restore redux-logic for zoom
+  };
+
+  const onHover = (evt, hoveredItems) => {
+    if (pointHover && !hoveredItems?.length) {
+      setPointHover(false);
+      if (chart.options.interactions.onPieUnhover) {
+        chart.options.interactions.onPieUnhover(evt);
+      }
+    }
+    if (!pointHover && hoveredItems?.length) {
+      setPointHover(true);
+      if (chart.options.interactions.onPieHover) {
+        const { index, datasetIndex } = hoveredItems[0];
+        const generatedDataset = generatedDatasets;
+        chart.options.interactions.onPieHover(
+          evt,
+          datasetIndex,
+          index,
+          generatedDataset,
+        );
+      }
+    }
+  };
+
+  const getDatalabels = () => {
+    return chart.options.graph.showDataLabels
+      ? {
+          display: 'auto',
+          align: 'center',
+          anchor: 'center',
+          formatter: (value, context) => {
+            if (
+              context.chart.getDatasetMeta(
+                chart.options.graph.stacked ? 0 : context.datasetIndex,
+              ).data[context.dataIndex].hidden
+            )
+              return '';
+            const dataElement = context.dataset.data[context.dataIndex];
+            const label =
+              dataElement?.label ||
+              (typeof dataElement === 'number'
+                ? dataElement
+                : Array.isArray(dataElement)
+                ? dataElement.reduce((acc, curr, i) => {
+                    if (i === 0) return `${acc} ${curr}`;
+                    return `${acc}, ${curr}`;
+                  }, '')
+                : '');
+            const dataLabel =
+              typeof dataElement === 'number'
+                ? Number.isInteger(label)
+                  ? label
+                  : label.toFixed(2)
+                : label;
+            return dataLabel;
+          },
+          color: chart.options.chartStyling.darkMode
+            ? defaults.darkModeColor
+            : undefined,
+        }
+      : {
+          display: false,
+        };
+  };
+
+  const getLegend = () => {
+    return {
+      position: chart.options.legend.position,
+      display: chart.options.legend.display,
+      align: chart.options.legend.align,
+      labels: {
+        generateLabels(chartInstance) {
+          if (chart.options.graph.stacked) {
+            const meta = chartInstance.getDatasetMeta(0);
+            if (chart.options.legend.useDataset) {
+              return chart.data.datasets.map((data, i) => {
+                const { label } =
+                  chart.data.datasets[i % chart.data.datasets.length];
+                const arc = meta.data[i];
+                const text = arc.hidden
+                  ? label.split('').reduce((acc, curr) => acc + '-', '')
+                  : label;
+                const backgroundColor = chart.data.datasets[i]?.backgroundColor;
+                const borderColor = chart.data.datasets[i]?.borderColor;
+                return {
+                  text,
+                  fillStyle:
+                    (Array.isArray(backgroundColor)
+                      ? backgroundColor[0]
+                      : backgroundColor) || colors[0] + `${99 - 20 * i}`,
+                  strokeStyle:
+                    (Array.isArray(borderColor)
+                      ? borderColor[0]
+                      : borderColor) || colors[0],
+                  index: i,
+                };
+              });
+            } else {
+              return chart.data.labels.map((data, i) => {
+                const label = chart.data.labels[i];
+                const arc = meta.data[parseInt(i * chart.data.datasets.length)];
+                const text = arc.hidden
+                  ? label.split('').reduce((acc, curr) => acc + '-', '')
+                  : label;
+                const backgroundColor = chart.data.datasets[0]?.backgroundColor;
+                const borderColor = chart.data.datasets[0]?.borderColor;
+                return {
+                  text,
+                  fillStyle:
+                    (Array.isArray(backgroundColor)
+                      ? backgroundColor[i % backgroundColor.length]
+                      : backgroundColor) || colors[i] + '99',
+                  strokeStyle:
+                    (Array.isArray(borderColor)
+                      ? borderColor[i % backgroundColor.length]
+                      : borderColor) || colors[i],
+                  index: i,
+                };
+              });
+            }
+          }
+          if (chart.options.legend.useDataset) {
+            return chart.data.datasets.map((dataset, i) => {
+              const meta = chartInstance.getDatasetMeta(i);
+              const text = meta.hidden
+                ? dataset.label.split('').reduce((acc, curr) => acc + '-', '')
+                : dataset.label;
+              const backgroundColor = chart.data.datasets[i]?.backgroundColor;
+              const borderColor = chart.data.datasets[i]?.borderColor;
+              return {
+                text,
+                fillStyle:
+                  (Array.isArray(backgroundColor)
+                    ? backgroundColor[0]
+                    : backgroundColor) || colors[0] + `${99 - 20 * i}`,
+                strokeStyle:
+                  (Array.isArray(borderColor) ? borderColor[0] : borderColor) ||
+                  colors[0],
+                index: i,
+              };
+            });
+          } else {
+            return chart.data.labels.map((label, i) => {
+              const meta = chartInstance.getDatasetMeta(0);
+              const arc = meta.data[i];
+              const text = arc.hidden
+                ? label.split('').reduce((acc, curr) => acc + '-', '')
+                : label;
+              const backgroundColor = chart.data.datasets[0]?.backgroundColor;
+              const borderColor = chart.data.datasets[0]?.borderColor;
+              return {
+                text,
+                fillStyle:
+                  (Array.isArray(backgroundColor)
+                    ? backgroundColor[i % backgroundColor.length]
+                    : backgroundColor) || colors[i] + '99',
+                strokeStyle:
+                  (Array.isArray(borderColor)
+                    ? borderColor[i % backgroundColor.length]
+                    : borderColor) || colors[i],
+                index: i,
+              };
+            });
+          }
+        },
+        boxHeight: 6,
+        boxWidth: 6,
+        usePointStyle: true,
+        color: chart.options.chartStyling.darkMode
+          ? defaults.darkModeColor
+          : undefined,
+        filter: (item, data) => {
+          if (!chart.options.legend.useDataset) return true;
+          return !chart.data.datasets[item.index]?.hideLegend;
+        },
+      },
+      onClick: legendClick,
+    };
+  };
+
+  const getToolTips = () => {
+    return {
+      callbacks: {
+        title: (tooltipItem) => {
+          const { dataIndex } = tooltipItem[0];
+          const index = chart.options.graph.stacked
+            ? parseInt(dataIndex / chart.data.labels.length)
+            : dataIndex;
+          const label = chart.data.labels[index];
+          return `${label}`;
+        },
+        label: (tooltipItem) => {
+          const { dataIndex } = tooltipItem;
+          const datasetIndex = chart.options.graph.stacked
+            ? dataIndex % chart.data.datasets.length
+            : tooltipItem.datasetIndex;
+          const dataLabel =
+            chart.data.datasets.length > 1
+              ? `${chart.data.datasets[datasetIndex]?.label}: `
+              : '';
+          const value = tooltipItem.dataset.data[dataIndex];
+          const labelValue =
+            typeof value === 'object'
+              ? `${value.value || ''} ${
+                  chart.options.tooltip.showLabelsInTooltips && value.label
+                    ? '(' + value.label + ')'
+                    : ''
+                }`
+              : value;
+          const unit = chart.data?.yUnit ? `[${chart.data?.yUnit}]` : '';
+          return `${dataLabel} ${labelValue} ${unit}`;
+        },
+      },
+    };
+  };
+  return (
+    <div
+      className={cx(
+        styles.chart,
+        !chart.options.chartStyling.width || !chart.options.chartStyling.height
+          ? chart.options.chartStyling.staticChartHeight
+            ? styles.fixedHeight
+            : styles.stretchHeight
+          : '',
+      )}
+      style={{
+        width: chart.options.chartStyling.width || 'auto',
+        height: chart.options.chartStyling.height || 'auto',
+      }}
+    >
+      <Pie
+        ref={chartRef}
+        data={{
+          datasets: generatedDatasets,
+          labels: chart.options.graph.stacked ? undefined : chart.data.labels,
+        }}
+        options={{
+          cutout: chart.options.graph.cutout,
+          onClick,
+          responsive: true, // Defaults to true, should be removed
+          maintainAspectRatio: chart.options.chartStyling.maintainAspectRatio,
+          animation: {
+            duration: chart.options.chartStyling.performanceMode ? 0 : 1000,
+          },
+          hover: {
+            mode: 'nearest',
+            intersect: 'true',
+            animationDuration: chart.options.chartStyling.performanceMode
+              ? 0
+              : 400,
+          },
+          onHover,
+          elements: {
+            pie: {
+              pointStyle: 'circle',
+            },
+          },
+          plugins: {
+            title: getTitle(),
+            datalabels: getDatalabels(),
+            // zoom: {
+            //   pan: {
+            //     enabled: ,
+            //     mode: ,
+            //   },
+            //   zoom: {
+            //     drag: {
+            //       enabled:,
+            //     },
+            //     mode: ,
+            //     speed: ,
+            //   },
+            // },
+            tooltip: getToolTips(),
+            legend: getLegend(),
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+PieChart.propTypes = PieChartPropTypes;
+
+export { PieChart };

package/src/components/pie-chart/pie-chart.module.less

@@ -0,0 +1,56 @@
+.chart {
+  border: 1px solid rgba(255, 255, 255, 0);
+  padding-top: 10px;
+  position: relative;
+
+  canvas {
+    width: 100% !important; // Fix for resizing bug
+    height: 100% !important; // Remove if stretched when maintainAspectRatio=true
+  }
+
+  &.fixedHeight {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: auto;
+  }
+
+  &.stretchHeight {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    height: 100%;
+  }
+
+  &:focus {
+    border: 1px solid #85b7d9;
+    outline: none; // Remove dotted outline on FF
+  }
+
+  &::-moz-focus-inner {
+    border: 0; // Remove dotted outline on FF
+  }
+}
+
+.zoomForm {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  right: 0;
+
+  .zoomReset {
+    margin-left: 10px;
+  }
+
+  .help {
+    margin-left: 5px;
+    line-height: 0; // Strip whitespace from icon
+  }
+}
+
+.autoWeight {
+  width: 'auto';
+  height: 'auto';
+}

package/src/components/scatter-chart/scatter-chart.intefrace.ts

@@ -0,0 +1,32 @@
+import { IChartPlugins } from "../../helpers/chart-interface";
+
+export interface IScatterChartOptions {
+  responsive: boolean;
+  maintainAspectRatio: boolean;
+  plugins: IChartPlugins;
+}
+
+export interface IScatterChartPoint {
+  x: number | string;
+  y: number | string;
+  label?: string;
+}
+
+export interface IScatterChartDataset {
+  label: string;
+  data: IScatterChartPoint[];
+  borderColor: string;
+  backgroundColor: string;
+  showLine: Boolean
+}
+
+export interface IScatterChartData {
+  data: {
+      datasets: IScatterChartDataset[]
+  };
+  options: IScatterChartOptions;
+}
+
+export interface IScatterChartProps {
+  chart: IScatterChartData;
+}

package/src/components/scatter-chart/scatter-chart.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Scatter } from 'react-chartjs-2';
+
+/**
+ *
+ * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
+ */
+const ScatterChart = (props) => {
+  const { data, options } = props.chart;
+  return <Scatter options={options} data={data} />;
+};
+
+export default ScatterChart;