@redsift/charts 11.5.0 → 11.6.0-alpha.0

package/_internal/PieChart2.js

@@ -0,0 +1,605 @@
+import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { Theme, useTheme, useMessageFormatter, useId } from '@redsift/design-system';
+import { L as LegendVariant, T as TooltipVariant } from './legend2.js';
+import { C as ChartSize, m as mergeLegends, g as getSortingMethod, a as ColorTheme } from './theme.js';
+import styled, { css } from 'styled-components';
+import { C as ChartContainer } from './ChartContainer2.js';
+import { arc, pie, sum } from 'd3';
+import { e as empty } from './scheme.js';
+import { A as Arcs } from './Arcs2.js';
+import { u as useFormatCategoricalData } from './useFormatCategoricalData.js';
+import { L as Legend } from './Legend3.js';
+
+/**
+ * Component variant.
+ */
+const PieChartVariant = {
+  plain: 'plain',
+  spaced: 'spaced',
+  donut: 'donut',
+  spacedDonut: 'spacedDonut'
+};
+/**
+ * Component's labels variant.
+ */
+const PieChartLegendVariant = {
+  none: 'none',
+  internal: 'internal',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledPieChart = styled(ChartContainer)`
+  .redsift-piechart__chart-wrapper {
+    position: relative;
+  }
+`;
+const StyledPieChartCenterText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref => {
+  let {
+    $maxWidth
+  } = _ref;
+  return $maxWidth;
+}}px;
+  }
+
+  > b {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-weight: var(--redsift-typography-font-weight-medium);
+    font-size: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+    line-height: ${_ref4 => {
+  let {
+    $textSize
+  } = _ref4;
+  return $textSize;
+}}px;
+
+    &:nth-child(2) {
+      font-weight: normal;
+      margin-top: 8px;
+      font-family: var(--redsift-typography-font-family-poppins);
+      font-size: ${_ref5 => {
+  let {
+    $smallTextSize
+  } = _ref5;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref6 => {
+  let {
+    $smallTextSize
+  } = _ref6;
+  return $smallTextSize;
+}}px;
+    }
+  }
+  > span {
+    color: ${_ref7 => {
+  let {
+    $theme
+  } = _ref7;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-size: ${_ref8 => {
+  let {
+    $textSize
+  } = _ref8;
+  return $textSize;
+}}px;
+    line-height: ${_ref9 => {
+  let {
+    $textSize
+  } = _ref9;
+  return $textSize;
+}}px;
+    &:nth-child(3) {
+      margin-top: 4px;
+      font-size: ${_ref10 => {
+  let {
+    $smallTextSize
+  } = _ref10;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref11 => {
+  let {
+    $smallTextSize
+  } = _ref11;
+  return $smallTextSize;
+}}px;
+    }
+  }
+  > b + span {
+    font-size: var(--redsift-typography-body-font-size);
+    font-family: var(--redsift-typography-font-family-poppins);
+    line-height: var(--redsift-typography-badge-line-height);
+    color: ${_ref12 => {
+  let {
+    $theme
+  } = _ref12;
+  return $theme === Theme.light ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)';
+}};
+    text-align: center;
+  }
+`;
+const StyledPieChartEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref13 => {
+  let {
+    $maxWidth
+  } = _ref13;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: ${_ref14 => {
+  let {
+    $isDonut,
+    $theme
+  } = _ref14;
+  return $isDonut ? css`var(--redsift-color-neutral-mid-grey)` : css`var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-size: ${_ref15 => {
+  let {
+    $textSize
+  } = _ref15;
+  return $textSize;
+}}px;
+    line-height: ${_ref16 => {
+  let {
+    $textSize
+  } = _ref16;
+  return $textSize;
+}}px;
+  }
+`;
+
+const _excluded$3 = ["className"];
+const LoadingPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), "Loading...");
+});
+
+const sizeToDimension = (size, isHalf) => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 200,
+        height: 200 * (isHalf ? 0.5 : 1),
+        smallFontSize: 13,
+        fontSize: 30,
+        innerRadius: 55
+      };
+    case ChartSize.large:
+      return {
+        width: 300,
+        height: 300 * (isHalf ? 0.5 : 1),
+        smallFontSize: 18,
+        fontSize: 38,
+        innerRadius: 80
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 240,
+        height: 240 * (isHalf ? 0.5 : 1),
+        smallFontSize: 14,
+        fontSize: 34,
+        innerRadius: 65
+      };
+  }
+};
+
+const _excluded$2 = ["className", "emptyComponent", "localeText", "size", "variant"];
+const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      emptyComponent,
+      localeText,
+      size,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const theme = useTheme();
+  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
+  const {
+    width,
+    height,
+    fontSize,
+    innerRadius
+  } = sizeToDimension(size);
+  const externalRadiusPadding = 8;
+  const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledPieChartEmptyText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: fontSize / 2,
+    $isDonut: isDonut,
+    $theme: theme
+  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement(Arcs, {
+    arcs: [{
+      createArc,
+      previousData: {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: 0,
+        endAngle: 0,
+        padAngle: 0,
+        value: 0,
+        index: 0
+      },
+      data: {
+        data: {
+          key: 'No Data',
+          value: 0
+        },
+        index: 0,
+        value: 0,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        padAngle: 0
+      },
+      dataset: [{
+        data: {
+          key: 'No Data',
+          value: 0
+        },
+        index: 0,
+        value: 0,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        padAngle: 0
+      }],
+      color: empty
+    }],
+    transform: `translate(${width / 2} ${height / 2})`
+  }))));
+});
+
+var definition$1 = "Pie Chart with {sliceLength} slices.";
+var enUS = {
+	"interactive-chart": "Interactive Line Chart",
+	"static-chart": "Static Line Chart",
+	definition: definition$1
+};
+
+var definition = "Diagramme circulaire contenant {sliceLength} secteurs.";
+var frFR = {
+	"interactive-chart": "Diagramme circulaire interactif",
+	"static-chart": "Diagramme circulaire statique",
+	definition: definition
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+const _excluded$1 = ["caping", "className", "data", "disableAnimations", "getSliceAnchorProps", "id", "isHalf", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "colorTheme", "tooltipVariant", "variant"],
+  _excluded2 = ["extraLegendItems"];
+const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caping,
+      className,
+      data: propsData,
+      disableAnimations,
+      getSliceAnchorProps,
+      id,
+      isHalf,
+      isSliceSelected,
+      labelDecorator,
+      legendDecorator,
+      legendVariant,
+      legendProps,
+      middleText: propsMiddleText,
+      onSliceClick,
+      others,
+      size,
+      sliceProps,
+      sliceRole,
+      sortingMethod,
+      subtext: propsSubtext,
+      text: propsText,
+      colorTheme,
+      tooltipVariant,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const cache = useRef();
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
+  const isSpaced = variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut;
+  const {
+    data,
+    colorScale
+  } = useFormatCategoricalData({
+    data: propsData,
+    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
+    caping,
+    others,
+    theme
+  });
+  useEffect(() => {
+    cache.current = data;
+  });
+  const {
+    width,
+    height,
+    smallFontSize,
+    fontSize,
+    innerRadius
+  } = sizeToDimension(size, isHalf);
+  const externalRadiusPadding = 8;
+  const createPie = pie().value(d => d.value).sort(null).startAngle(isHalf ? Math.PI * -0.5 : 0).endAngle(isHalf ? Math.PI * 0.5 : Math.PI * 2);
+  const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
+  const pieData = createPie(data);
+  const previousPieData = cache.current ? createPie(cache.current) : undefined;
+  const total = sum(data, d => d.value);
+  const legendWidth = useRef();
+  if (data && !legendWidth.current) {
+    legendWidth.current = `${Math.max(...data.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
+  }
+  const text = typeof propsText === 'function' ? propsText(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsText;
+  const subtext = typeof propsSubtext === 'function' ? propsSubtext(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsSubtext;
+  const middleText = typeof propsMiddleText === 'function' ? propsMiddleText(pieData.map(datum => {
+    const percent = datum.data.value / total;
+    return _objectSpread2(_objectSpread2({}, datum), {}, {
+      data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+        percent
+      })
+    });
+  }), total) : propsMiddleText;
+  const filteredPieData = pieData.filter(datum => datum.data.value);
+  const _ref = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref,
+    forwardedLegendProps = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({
+    mode: typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: format('definition', {
+      sliceLength: filteredPieData.length
+    }),
+    dataTableRepresentation: {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, filteredPieData.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+        key: datum.data.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, datum.data.key), /*#__PURE__*/React__default.createElement("td", null, datum.data.value))))
+    }
+  }, forwardedProps, {
+    className: className,
+    id: id,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${PieChart.className}__chart-wrapper`
+  }, text ? /*#__PURE__*/React__default.createElement(StyledPieChartCenterText, {
+    $maxWidth: innerRadius * 2,
+    $textSize: fontSize,
+    $smallTextSize: smallFontSize,
+    $theme: theme
+  }, subtext ? /*#__PURE__*/React__default.createElement("b", null, text) : /*#__PURE__*/React__default.createElement("span", null, text), middleText ? /*#__PURE__*/React__default.createElement("b", null, middleText) : null, /*#__PURE__*/React__default.createElement("span", null, subtext)) : null, /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: isHalf ? height + externalRadiusPadding : height,
+    "aria-label": typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, /*#__PURE__*/React__default.createElement(Arcs, {
+    arcs: filteredPieData.map((datum, index) => {
+      const percent = datum.data.value / total;
+      const from = previousPieData ? previousPieData[index] : {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: isHalf ? Math.PI * -0.5 : 0,
+        endAngle: isHalf ? Math.PI * -0.5 : 0,
+        padAngle: 0,
+        value: 0,
+        index: index
+      };
+      const to = _objectSpread2(_objectSpread2({}, datum), {}, {
+        data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
+          percent
+        })
+      });
+      return {
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
+        createArc,
+        previousData: from,
+        id: `id${id}__arc-${index}`,
+        index,
+        isSelected: isSliceSelected(to),
+        key: `id${id}__arc-${index}`,
+        data: to,
+        dataset: pieData,
+        anchorProps: getSliceAnchorProps ? getSliceAnchorProps(to) : undefined
+      };
+    }),
+    disableAnimations: disableAnimations,
+    hasLabels: legendVariant === PieChartLegendVariant.internal,
+    hasStroke: isSpaced,
+    labelDecorator: labelDecorator,
+    onClick: onSliceClick,
+    role: sliceRole,
+    sliceProps: sliceProps,
+    tooltipVariant: tooltipVariant,
+    transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
+  }))), legendVariant !== PieChartLegendVariant.none && legendVariant !== PieChartLegendVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, data).sort(getSortingMethod(sortingMethod)) : data).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
+    })),
+    variant: legendVariant === PieChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === PieChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === PieChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    width: legendWidth.current,
+    labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
+  }, forwardedLegendProps)) : null);
+});
+
+const _excluded = ["caping", "chartRef", "className", "colorTheme", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "sortingMethod", "subtext", "text", "tooltipDecorator", "tooltipVariant", "variant"];
+const COMPONENT_NAME = 'PieChart';
+const CLASSNAME = 'redsift-piechart';
+const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caping,
+      chartRef,
+      className,
+      colorTheme = ColorTheme.default,
+      data: propsData,
+      emptyComponent,
+      id: propsId,
+      isSliceSelected = () => true,
+      labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
+      middleText,
+      onSliceClick,
+      others = true,
+      size = ChartSize.medium,
+      sliceRole,
+      sortingMethod = 'desc-value',
+      subtext,
+      text,
+      tooltipDecorator,
+      tooltipVariant = TooltipVariant.value,
+      variant = PieChartVariant.spaced
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : PieChartLegendVariant.none;
+  if (propsData === undefined || propsData === null) {
+    return /*#__PURE__*/React__default.createElement(LoadingPieChart, _extends({
+      id: id
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyPieChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      id: id,
+      localeText: localeText,
+      size: size,
+      sortingMethod: sortingMethod,
+      variant: variant
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(RenderedPieChart, _extends({
+    caping: caping,
+    chartRef: chartRef,
+    className: classNames(PieChart.className, className),
+    data: propsData,
+    id: id,
+    isSliceSelected: isSliceSelected,
+    labelDecorator: labelDecorator,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
+    middleText: middleText,
+    onSliceClick: onSliceClick,
+    others: others,
+    size: size,
+    sliceRole: sliceRole,
+    sortingMethod: sortingMethod,
+    subtext: subtext,
+    text: text,
+    colorTheme: colorTheme,
+    tooltipDecorator: tooltipDecorator,
+    tooltipVariant: tooltipVariant,
+    variant: variant
+  }, forwardedProps, {
+    ref: ref
+  }));
+});
+PieChart.className = CLASSNAME;
+PieChart.displayName = COMPONENT_NAME;
+
+export { PieChart as P, StyledPieChart as S, PieChartVariant as a, PieChartLegendVariant as b, StyledPieChartCenterText as c, StyledPieChartEmptyText as d };
+//# sourceMappingURL=PieChart2.js.map