@oliasoft-open-source/charts-library 3.3.6-beta-3 → 3.3.6-beta-5

package/src/components/line-chart/initialize/config.js

@@ -0,0 +1,23 @@
+import { INIT_KEYS } from '../constants/line-chart-consts';
+import { getTranslations } from '../utils/translations/get-translations';
+
+const config = {
+  [INIT_KEYS.TRANSLATIONS]: getTranslations(),
+  [INIT_KEYS.LANGUAGE_KEY]: 'en',
+};
+
+/**
+ * Retrieve the value for the given key from the config object.
+ * @param {string} key - The key to access the corresponding value in the config object.
+ * @returns {*} - The value associated with the given key in the config object or config.
+ */
+export const getConfig = (key) => (key ? config[key] : config);
+
+/**
+ * Set a new value for the given key in the config object.
+ * @param {string} key - The key to access the corresponding value in the config object.
+ * @param {*} newValue - The new value to be set for the given key.
+ */
+export const setConfig = (key, newValue) => {
+  config[key] = newValue;
+};

package/src/components/line-chart/initialize/initialize-line-chart.js

@@ -0,0 +1,25 @@
+import { INIT_KEYS } from '../constants/line-chart-consts';
+import { setConfig } from './config';
+import { getTranslations } from '../utils/translations/get-translations';
+import { isPrimitiveValue } from '../utils/line-chart-utils';
+
+/**
+ * Initialize the charts library with the provided configurations.
+ * This function will store the configuration options in a config object.
+ * @param {object} options - An object containing the configuration options for the library.
+ * @param {object} options.translations - The translations to be used in the library.
+ * @param {string} options.languageKey - The language key to be stored in the config object, used for translations.
+ * @param {...object} options - Any additional options to be stored in the config object.
+ */
+export const initializeLineChart = ({ languageKey = 'en', ...options }) => {
+  setConfig(INIT_KEYS.LANGUAGE_KEY, languageKey);
+
+  Object.entries(options).forEach(([key, value]) => {
+    if (key === INIT_KEYS.TRANSLATIONS) {
+      setConfig(key, getTranslations(value));
+    } else {
+      const newValue = isPrimitiveValue(value) ? value : { ...value };
+      setConfig(key, newValue);
+    }
+  });
+};

package/src/components/line-chart/legend/legend-constants.js

@@ -0,0 +1 @@
+export const LEGEND_MARGIN = 4;

package/src/components/line-chart/legend/legend-dropzone.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import cx from 'classnames';
+import { useDrop } from 'react-dnd';
+import styles from './legend.module.less';
+import { Position } from '../../../helpers/enums';
+import { LEGEND_MARGIN } from './legend-constants';
+
+const LegendDropZone = ({ position, onDrop, placeholderSize }) => {
+  const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
+    accept: 'legend',
+    drop: onDrop,
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  }));
+  const isActive = isOver && canDrop;
+  return (
+    <div
+      ref={dropRef}
+      className={cx(
+        styles.dropzone,
+        isActive && styles.isActive,
+        position.includes('left') && styles.left,
+        position.includes('right') && styles.right,
+        position.includes('top') && styles.top,
+        position.includes('bottom') && styles.bottom,
+      )}
+    >
+      <div
+        className={styles.dropzonePlaceholder}
+        style={{ ...placeholderSize, margin: LEGEND_MARGIN }}
+      />
+    </div>
+  );
+};
+
+const LegendDropZones = ({
+  chartArea,
+  setLegendPosition,
+  isDragging,
+  placeholderSize,
+}) => {
+  const positions = [
+    Position.TopLeft,
+    Position.TopRight,
+    Position.BottomLeft,
+    Position.BottomRight,
+  ];
+  const { top, left, width, height } = chartArea;
+  return (
+    <div
+      className={styles.dropzoneContainer}
+      style={{
+        top,
+        left,
+        width,
+        height,
+        zIndex: isDragging ? 0 : -1, // Position dropzones behind chart when not needed
+      }}
+    >
+      {positions.map((position) => (
+        <LegendDropZone
+          key={position}
+          position={position}
+          onDrop={() => setLegendPosition(position)}
+          placeholderSize={placeholderSize}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default LegendDropZones;

package/src/components/line-chart/legend/legend-item.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import cx from 'classnames';
+import { Icon } from '@oliasoft-open-source/react-ui-library';
+import circleSvg from '../../../assets/circle.svg';
+import rectSvg from '../../../assets/rect.svg';
+import rectRotSvg from '../../../assets/rectRot.svg';
+import triangleSvg from '../../../assets/triangle.svg';
+import styles from './legend.module.less';
+import { AnnotationType } from '../../../helpers/enums';
+
+const LEGEND_SYMBOL_SIZE = 16;
+
+const LegendItemLine = ({ dataset }) => {
+  const { borderColor, borderDash, borderWidth } = dataset;
+  // Center line dash on point
+  const offset = borderDash.length
+    ? (((LEGEND_SYMBOL_SIZE - borderDash[0]) / 2) %
+        (borderDash[0] + borderDash[1])) *
+      -1
+    : 0;
+
+  return (
+    <span className={styles.legendItemLine}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={`0 0 ${LEGEND_SYMBOL_SIZE} ${LEGEND_SYMBOL_SIZE}`}
+      >
+        <line
+          x1="0"
+          y1="50%"
+          x2="100%"
+          y2="50%"
+          stroke={borderColor}
+          strokeWidth={borderWidth}
+          strokeDasharray={borderDash}
+          strokeDashoffset={offset}
+        />
+      </svg>
+    </span>
+  );
+};
+
+const LegendItemPoint = ({ dataset }) => {
+  const { pointBackgroundColor, pointRadius, pointStyle } = dataset;
+  if (!pointRadius) return null;
+  const size = pointRadius * 2;
+  const icons = {
+    circle: circleSvg,
+    triangle: triangleSvg,
+    rectRot: rectRotSvg,
+    rect: rectSvg,
+  };
+  return (
+    <span className={styles.legendItemPoint}>
+      <Icon
+        icon={icons[pointStyle] || circleSvg}
+        size={size}
+        color={pointBackgroundColor}
+      />
+    </span>
+  );
+};
+
+const LegendItemBox = ({ dataset }) => {
+  const { backgroundColor } = dataset;
+  const style = { backgroundColor };
+  return <span className={styles.legendItemBox} style={style} />;
+};
+
+const LegendItemSymbol = ({ dataset }) => {
+  const { annotationType, showLine } = dataset;
+  switch (annotationType) {
+    case AnnotationType.Box:
+    case AnnotationType.Ellipse:
+      return <LegendItemBox dataset={dataset} />;
+    case AnnotationType.Line:
+      return <LegendItemLine dataset={dataset} />;
+    default:
+      return (
+        <>
+          {showLine && <LegendItemLine dataset={dataset} />}
+          <LegendItemPoint dataset={dataset} />
+        </>
+      );
+  }
+};
+
+const LegendItem = ({ hidden, dataset, handleClick }) => {
+  return (
+    <div
+      className={cx(styles.legendItem, hidden && styles.isHidden)}
+      onClick={handleClick}
+    >
+      <span
+        className={styles.legendItemSymbol}
+        style={{ width: LEGEND_SYMBOL_SIZE }}
+      >
+        <LegendItemSymbol dataset={dataset} />
+      </span>
+      <span className={styles.legendItemText}>{dataset.label}</span>
+    </div>
+  );
+};
+
+export default LegendItem;

package/src/components/line-chart/legend/legend-panel.jsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, useState } from 'react';
+import cx from 'classnames';
+import { Button } from '@oliasoft-open-source/react-ui-library';
+import { TbList, TbX } from 'react-icons/tb';
+import styles from './legend.module.less';
+import { useToggleHandlers } from '../hooks/use-toggle-handler';
+import { useChartFunctions } from '../hooks/use-chart-functions';
+import LegendItem from './legend-item';
+import { LEGEND_MARGIN } from './legend-constants';
+
+const LegendPanel = forwardRef((props, ref) => {
+  const {
+    legendPosition,
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+    isDragging,
+  } = props;
+  const [refresh, setRefresh] = useState(false);
+  const { legendEnabled } = state;
+  const { legendClick } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+  });
+  const { onToggleLegend } = useToggleHandlers(dispatch);
+  const chart = chartRef.current;
+  if (!chart) return null;
+  const { data, chartArea, height = 0, width = 0 } = chart;
+  const { datasets } = data;
+  const { top, left, bottom, right } = chartArea;
+  const items =
+    chart.options?.plugins?.legend?.labels?.generateLabels(chart) ?? [];
+
+  const style = {
+    left: legendPosition.includes('left') ? left : null,
+    right: legendPosition.includes('right') ? width - right : null,
+    top: legendPosition.includes('top') ? top : null,
+    bottom: legendPosition.includes('bottom') ? height - bottom : null,
+    maxHeight: 0.5 * (bottom - top - LEGEND_MARGIN * 2),
+    maxWidth: 0.5 * (right - left - LEGEND_MARGIN * 2),
+    margin: LEGEND_MARGIN,
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cx(
+        styles.legend,
+        !legendEnabled && styles.isHidden,
+        isDragging && styles.isDragging,
+      )}
+      style={style}
+    >
+      <div className={styles.legendToggle}>
+        <Button
+          onClick={onToggleLegend}
+          small
+          round
+          icon={legendEnabled ? <TbX /> : <TbList />}
+        />
+      </div>
+      <div className={styles.legendItems}>
+        {items.map((item) => (
+          <LegendItem
+            key={`${item.datasetIndex}-hidden-${item.hidden}`}
+            hidden={item.hidden}
+            dataset={datasets[item.datasetIndex]}
+            handleClick={(event) => {
+              legendClick(event, item);
+              // TODO: Replace this hack with a better solution: item needs to rerender when "item.hidden" changes
+              // Force the legend item to update when clicked
+              setRefresh(!refresh);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export default LegendPanel;

package/src/components/line-chart/legend/legend.jsx

@@ -0,0 +1,54 @@
+import React, { useRef, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { useDrag } from 'react-dnd';
+import LegendPanel from './legend-panel';
+import LegendDropZones from './legend-dropzone';
+import styles from './legend.module.less';
+
+const Legend = ({ chartRef, state, options, dispatch, generatedDatasets }) => {
+  const [resizeRef] = useMeasure(); // Trigger update when chart is resized
+  const panelRef = useRef(null);
+  const chart = chartRef.current;
+  const [legendPosition, setLegendPosition] = useState(options.legend.position);
+  const panelRect = panelRef.current
+    ? panelRef.current.getBoundingClientRect()
+    : null;
+  const panelSize = { width: panelRect?.width, height: panelRect?.height };
+
+  const [{ isDragging }, dragRef] = useDrag(() => ({
+    type: 'legend',
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }));
+
+  if (!chart) return null;
+  const { chartArea } = chart;
+
+  return (
+    <>
+      <div ref={resizeRef} className={styles.resizeContainer} />
+      <LegendPanel
+        legendPosition={legendPosition}
+        chartRef={chartRef}
+        state={state}
+        options={options}
+        dispatch={dispatch}
+        generatedDatasets={generatedDatasets}
+        isDragging={isDragging}
+        ref={(r) => {
+          dragRef(r);
+          panelRef.current = r;
+        }}
+      />
+      <LegendDropZones
+        chartArea={chartArea}
+        setLegendPosition={setLegendPosition}
+        isDragging={isDragging}
+        placeholderSize={panelSize}
+      />
+    </>
+  );
+};
+
+export default Legend;

package/src/components/line-chart/legend/legend.module.less

@@ -0,0 +1,192 @@
+.legend {
+  position: absolute;
+  opacity: 0.9;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+
+  &.isDragging {
+    opacity: 0;
+  }
+}
+
+.legendItems {
+  background-color: var(--color-background-raised);
+  border: 1px solid var(--color-border);
+  padding: 4px 8px;
+  border-radius: 2px;
+  overflow-y: auto;
+  max-height: 100%;
+  .scrollbars();
+
+  .legend.isDragging && {
+    pointer-events: none;
+  }
+
+  .legend.isHidden && {
+    display: none;
+  }
+}
+
+.legendToggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: none;
+
+  .legend.isHidden &&,
+  .legend:hover && {
+    display: block;
+  }
+
+  .legend:active && {
+    &:not(:hover) {
+      display: none;
+    }
+  }
+
+  .legend.isHidden && {
+    position: static;
+    transform: none;
+  }
+
+  .legend.isDragging && {
+    display: none;
+  }
+}
+
+.legendItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.legendItemSymbol {
+  display: flex;
+  align-items: center;
+  height: 16px;
+  position: relative;
+  flex-shrink: 0;
+
+  html[data-theme='dark'] && {
+    // Flip chart colors if dark mode enabled
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
+
+.legendItemBox {
+  width: 100%;
+  height: 12px;
+  display: block;
+}
+
+.legendItemLine {
+  position: absolute;
+  display: flex;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  transform: translateY(-50%);
+}
+
+.legendItemPoint {
+  position: absolute;
+  display: flex;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.legendItemText {
+  .isHidden && {
+    text-decoration: line-through;
+  }
+}
+
+.scrollbars {
+  // https://dev.to/jonosellier/easy-overlay-scrollbars-variable-width-1mbh
+  overflow: overlay;
+  --scrollbar-color: #00000040;
+
+  &::-webkit-scrollbar {
+    display: block;
+    width: 16px;
+    z-index: 2;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #00000000;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background-color: #00000000;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #00000000;
+    border: 5px solid transparent;
+    border-radius: 24px;
+    box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+  }
+}
+
+.dropzoneContainer {
+  position: absolute;
+}
+
+.dropzone {
+  position: absolute;
+  width: 50%;
+  height: 50%;
+  display: flex;
+
+  &.left {
+    left: 0;
+    justify-content: flex-start;
+  }
+  &.right {
+    right: 0;
+    justify-content: flex-end;
+  }
+  &.top {
+    top: 0;
+    align-items: flex-start;
+  }
+  &.bottom {
+    bottom: 0;
+    align-items: flex-end;
+  }
+}
+
+.dropzonePlaceholder {
+  position: absolute;
+  background-color: rgba(black, 0.05);
+  display: none;
+
+  [data-theme='dark'] & {
+    background-color: rgba(white, 0.05);
+  }
+
+  .isActive && {
+    display: block;
+  }
+}
+
+.resizeContainer {
+  position: absolute;
+  inset: 0;
+  z-index: -1; // Display behind chart
+}