@redsift/charts 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/_internal/PieChart2.js

@@ -1,605 +0,0 @@
-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