@oliasoft-open-source/charts-library 0.0.2-beta-1

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

@@ -0,0 +1,450 @@
+import React, { useRef, useState } from 'react';
+import cx from 'classnames';
+import {
+  ArcElement,
+  CategoryScale,
+  Chart as ChartJS,
+  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 { ANIMATION_DURATION } from '../../helpers/chart-consts';
+import styles from './pie-chart.module.less';
+import { colors, generateRandomColor } from './pie-chart-utils';
+import { getDefaultProps, PieChartPropTypes } from './pie-chart-prop-types';
+import { setDefaultTheme } from '../../helpers/chart-utils';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  LogarithmicScale,
+  ArcElement,
+  Legend,
+  Tooltip,
+  Title,
+  Filler,
+  zoomPlugin,
+  dataLabelsPlugin,
+);
+
+/**
+ * this is a pie chart component
+ * @param {} props
+ * @param {import('./pie-chart.interface').IPieChartProps} IPieChartProps
+ * ./pie-chart.interface
+ */
+const PieChart = (props) => {
+  setDefaultTheme();
+  const chart = getDefaultProps(props);
+  const chartRef = useRef(null);
+  const [pointHover, setPointHover] = useState(false);
+  const { data, options, testId } = chart;
+
+  const generateDatasets = (datasets) => {
+    const copyDataset = JSON.parse(JSON.stringify(datasets));
+
+    if (options.graph.stacked) {
+      const generatedDataset = {
+        label: copyDataset[0].label,
+        backgroundColor: [],
+        borderColor: [],
+        borderWidth: parseFloat(copyDataset[0].borderWidth) || '1',
+        data: [],
+      };
+      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 color = pieDataset.data.map(
+        (pie, i) => colors[i] || generateRandomColor(),
+      );
+      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(data.datasets);
+
+  const getTitle = () => {
+    return options.title !== ''
+      ? {
+          display: true,
+          text: chart.options.title,
+        }
+      : {};
+  };
+
+  const legendClick = (e, legendItem, legend) => {
+    const chartInstance = legend.chart;
+    const { datasets } = chartInstance.data;
+    const { index } = legendItem;
+
+    if (options.graph.stacked) {
+      if (options.legend.useDataset) {
+        for (
+          let i = 0;
+          i < chartInstance.config._config.data.datasets[0].data.length;
+          i++
+        ) {
+          if (i % 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 / data.datasets.length) === index) {
+            const meta = chartInstance.getDatasetMeta(0);
+            const arc = meta.data[i];
+            arc.hidden = !arc.hidden;
+          }
+        }
+      }
+    } else {
+      if (options.legend.useDataset) {
+        const meta = chartInstance.getDatasetMeta(index);
+        meta.hidden = !meta.hidden;
+      } else {
+        if (datasets.length > 1) {
+          for (let i = 0; i < 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 (options.interactions.onLegendClick)
+      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 (options.interactions.onPieUnhover) {
+        options.interactions.onPieUnhover(evt);
+      }
+    }
+    if (!pointHover && hoveredItems?.length) {
+      setPointHover(true);
+      if (options.interactions.onPieHover) {
+        const { index, datasetIndex } = hoveredItems[0];
+        const generatedDataset = generatedDatasets;
+        options.interactions.onPieHover(
+          evt,
+          datasetIndex,
+          index,
+          generatedDataset,
+        );
+      }
+    }
+  };
+
+  const getDatalabels = () => {
+    return options.graph.showDataLabels
+      ? {
+          display: 'auto',
+          align: 'center',
+          anchor: 'center',
+          formatter: (value, context) => {
+            if (
+              context.chart.getDatasetMeta(
+                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;
+          },
+        }
+      : {
+          display: false,
+        };
+  };
+
+  const getLegend = () => {
+    return {
+      position: options.legend.position,
+      display: options.legend.display,
+      align: options.legend.align,
+      labels: {
+        generateLabels(chartInstance) {
+          if (options.graph.stacked) {
+            const meta = chartInstance.getDatasetMeta(0);
+            if (options.legend.useDataset) {
+              return data.datasets.map((data, i) => {
+                const { label } = data.datasets[i % data.datasets.length];
+                const arc = meta.data[i];
+                const text = arc.hidden
+                  ? label.split('').reduce((acc, curr) => acc + '-', '')
+                  : label;
+                const backgroundColor = data.datasets[i]?.backgroundColor;
+                const borderColor = 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 data.labels.map((data, i) => {
+                const label = data.labels[i];
+                const arc = meta.data[parseInt(i * data.datasets.length)];
+                const text = arc.hidden
+                  ? label.split('').reduce((acc, curr) => acc + '-', '')
+                  : label;
+                const backgroundColor = data.datasets[0]?.backgroundColor;
+                const borderColor = 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 (options.legend.useDataset) {
+            return 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 = data.datasets[i]?.backgroundColor;
+              const borderColor = 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 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 = data.datasets[0]?.backgroundColor;
+              const borderColor = 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,
+        filter: (item, data) => {
+          if (!options.legend.useDataset) return true;
+          return !data.datasets[item.index]?.hideLegend;
+        },
+      },
+      onClick: legendClick,
+    };
+  };
+
+  const getToolTips = () => {
+    return {
+      callbacks: {
+        title: (tooltipItem) => {
+          const { dataIndex } = tooltipItem[0];
+          const index = options.graph.stacked
+            ? parseInt(dataIndex / data.labels.length)
+            : dataIndex;
+          const label = data.labels[index];
+          return `${label}`;
+        },
+        label: (tooltipItem) => {
+          const { dataIndex } = tooltipItem;
+          const datasetIndex = options.graph.stacked
+            ? dataIndex % data.datasets.length
+            : tooltipItem.datasetIndex;
+          const dataLabel =
+            data.datasets.length > 1
+              ? `${data.datasets[datasetIndex]?.label}: `
+              : '';
+          const value = tooltipItem.dataset.data[dataIndex];
+          const labelValue =
+            typeof value === 'object'
+              ? `${value.value || ''} ${
+                  options.tooltip.showLabelsInTooltips && value.label
+                    ? '(' + value.label + ')'
+                    : ''
+                }`
+              : value;
+          const unit = data?.yUnit ? `[${data?.yUnit}]` : '';
+          return `${dataLabel} ${labelValue} ${unit}`;
+        },
+      },
+    };
+  };
+  return (
+    <div
+      className={cx(
+        styles.chart,
+        !options.chartStyling.width || !options.chartStyling.height
+          ? options.chartStyling.staticChartHeight
+            ? styles.fixedHeight
+            : styles.stretchHeight
+          : '',
+      )}
+      style={{
+        width: options.chartStyling.width || 'auto',
+        height: options.chartStyling.height || 'auto',
+      }}
+      data-testid={testId}
+    >
+      <Pie
+        ref={chartRef}
+        data={{
+          datasets: generatedDatasets,
+          labels: options.graph.stacked ? undefined : data.labels,
+        }}
+        options={{
+          cutout: options.graph.cutout,
+          onClick,
+          responsive: true, // Defaults to true, should be removed
+          maintainAspectRatio: options.chartStyling.maintainAspectRatio,
+          animation: options.chartStyling.performanceMode
+            ? false
+            : {
+                duration: ANIMATION_DURATION.FAST,
+              },
+          hover: {
+            mode: 'nearest',
+            intersect: 'true',
+          },
+          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,61 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.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,33 @@
+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 {
+  testId: string | null;
+  data: {
+      datasets: IScatterChartDataset[]
+  };
+  options: IScatterChartOptions;
+}
+
+export interface IScatterChartProps {
+  chart: IScatterChartData;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Scatter } from 'react-chartjs-2';
+
+import { setDefaultTheme } from '../../helpers/chart-utils';
+import styles from './scatter-chart.module.less';
+
+/**
+ *
+ * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
+ */
+const ScatterChart = (props) => {
+  setDefaultTheme();
+  const { data, options, testId = null } = props.chart;
+  return (
+    <div className={styles.chart}>
+      <Scatter options={options} data={data} data-testid={testId} />
+    </div>
+  );
+};
+
+export default ScatterChart;

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

@@ -0,0 +1,4 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}

package/src/helpers/chart-border-plugin.js

@@ -0,0 +1,19 @@
+/**
+ * Chart border plugin config
+ */
+export const chartAreaBorderPlugin = {
+  id: 'chartAreaBorder',
+  beforeDraw(chart, args, options) {
+    const {
+      ctx,
+      chartArea: { left, top, width, height },
+    } = chart;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.setLineDash(options.borderDash || []);
+    ctx.lineDashOffset = options.borderDashOffset;
+    ctx.strokeRect(left, top, width, height);
+    ctx.restore();
+  },
+};

package/src/helpers/chart-consts.js

@@ -0,0 +1,62 @@
+export const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6,
+};
+export const BORDER_COLOR = 'rgba(0,0,0,0.1)';
+
+export const ANNOTATION_DASH = [10, 2];
+export const DEFAULT_FONT_SIZE = 13;
+export const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
+export const DEFAULT_COLOR = 'rgba(0,0,0,.87)';
+export const LEGEND_LABEL_BOX_SIZE = 6;
+
+export const LOGARITHMIC_STEPS = [1, 10, 100, 1000, 10000];
+
+export const COLORS = [
+  '#3366cc',
+  '#dc3912',
+  '#ff9900',
+  '#109618',
+  '#990099',
+  '#0099c6',
+  '#dd4477',
+  '#66aa00',
+  '#b82e2e',
+  '#316395',
+  '#994499',
+  '#22aa99',
+  '#aaaa11',
+  '#6633cc',
+  '#e67300',
+  '#8b0707',
+  '#651067',
+  '#329262',
+  '#5574a6',
+  '#3b3eac',
+];
+
+/**
+ * @type {string}
+ * @desc equivalent of 0.6 rgba alpha chanel
+ */
+export const ALPHA_CHANEL = '99';
+
+/**
+ * @type {number}
+ * @desc #FFFFFF as decimal number
+ */
+export const WHITE_COLOR_AS_DECIMAL = 16777215;
+
+export const AUTO = 'auto';
+
+export const ANIMATION_DURATION = {
+  NO: 0,
+  SLOW: 400,
+  FAST: 1000,
+};
+
+export const DEFAULT_CHART_NAME = 'new_chart';
+
+export const CUSTOM_LEGEND_PLUGIN_NAME = 'htmlLegend';
+
+export const DECIMAL_POINT_TOLERANCE = 9; //ignore decimal points beyond this