@pareto-engineering/design-system 5.0.2 → 5.0.4

package/dist/cjs/a/Charts/PieChart/PieChart.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _recharts = require("recharts");
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _Common = require("../Common");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const baseClassName = _exports.default.base;
-const componentClassName = 'pie-chart';
-const PieChart = _ref => {
-  let {
-    id,
-    className: userClassName,
-    data,
-    title,
-    valueKey,
-    labelKey,
-    colors,
-    height,
-    width,
-    innerRadius,
-    outerRadius
-  } = _ref;
-  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
-  const formattedData = data.map(item => ({
-    ...item,
-    label: item[labelKey],
-    color: colors[data.indexOf(item)],
-    percentage: (item[valueKey] / total * 100).toFixed(0)
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "chart-header"
-  }, /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
-    className: "chart-content"
-  }, /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(_recharts.PieChart, null, /*#__PURE__*/React.createElement(_recharts.Pie, {
-    data: formattedData,
-    dataKey: valueKey,
-    nameKey: labelKey,
-    cx: "50%",
-    cy: "50%",
-    innerRadius: innerRadius,
-    outerRadius: outerRadius,
-    label: false,
-    paddingAngle: 0
-  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(_recharts.Cell, {
-    key: entry[labelKey],
-    fill: colors[index],
-    strokeWidth: 0
-  }))), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
-    content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      isDateValue: false
-    })
-  }))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
-    colorsArray: colors,
-    yKeysArray: formattedData,
-    capitalizedLegend: true,
-    orientation: "vertical",
-    getLegendItemTitle: entry => entry[labelKey],
-    getLegendItemSubtitle: entry => entry[valueKey]
-  })));
-};
-PieChart.propTypes = {
-  id: _propTypes.default.string,
-  className: _propTypes.default.string,
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    [_propTypes.default.string]: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-  })).isRequired,
-  title: _propTypes.default.string.isRequired,
-  valueKey: _propTypes.default.string.isRequired,
-  labelKey: _propTypes.default.string.isRequired,
-  colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  innerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  outerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-};
-PieChart.defaultProps = {
-  id: undefined,
-  className: undefined,
-  width: '100%',
-  height: 300,
-  innerRadius: '0%',
-  outerRadius: '100%'
-};
-var _default = exports.default = PieChart;

package/dist/cjs/a/Charts/PieChart/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "PieChart", {
-  enumerable: true,
-  get: function () {
-    return _PieChart.default;
-  }
-});
-var _PieChart = _interopRequireDefault(require("./PieChart"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/a/Charts/PieChart/styles.scss

@@ -1,48 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$default-text-font-size: calc(var(--s-1) * 1rem);
-
-.#{bem.$base} {
-  &.pie-chart {
-    background-color: var(--background-far);
-    border-radius: var(--theme-default-border-radius);
-    box-shadow: $default-box-shadow;
-    margin: $default-margin 0;
-    padding: $default-padding;
-
-    .chart-header {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $default-margin;
-
-      h3 {
-        color: var(--subtitle);
-        margin: calc($default-margin / 5);
-        text-align: left;
-      }
-    }
-
-    .chart-content {
-      align-items: flex-start;
-      display: flex;
-    }
-
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-text {
-          fill: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * .75);
-        }
-
-        .recharts-text.recharts-label {
-          fill: var(--paragraph);
-          font-size: $default-text-font-size;
-        }
-      }
-    }
-  }
-}

package/dist/es/a/Charts/PieChart/PieChart.js

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
-import styleNames from '@pareto-engineering/bem/exports';
-import { CustomLegend, CustomTooltipContent } from "../Common";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'pie-chart';
-const PieChart = ({
-  id,
-  className: userClassName,
-  data,
-  title,
-  valueKey,
-  labelKey,
-  colors,
-  height,
-  width,
-  innerRadius,
-  outerRadius
-}) => {
-  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
-  const formattedData = data.map(item => ({
-    ...item,
-    label: item[labelKey],
-    color: colors[data.indexOf(item)],
-    percentage: (item[valueKey] / total * 100).toFixed(0)
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "chart-header"
-  }, /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
-    className: "chart-content"
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(RechartsPieChart, null, /*#__PURE__*/React.createElement(Pie, {
-    data: formattedData,
-    dataKey: valueKey,
-    nameKey: labelKey,
-    cx: "50%",
-    cy: "50%",
-    innerRadius: innerRadius,
-    outerRadius: outerRadius,
-    label: false,
-    paddingAngle: 0
-  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(Cell, {
-    key: entry[labelKey],
-    fill: colors[index],
-    strokeWidth: 0
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isDateValue: false
-    })
-  }))), /*#__PURE__*/React.createElement(CustomLegend, {
-    colorsArray: colors,
-    yKeysArray: formattedData,
-    capitalizedLegend: true,
-    orientation: "vertical",
-    getLegendItemTitle: entry => entry[labelKey],
-    getLegendItemSubtitle: entry => entry[valueKey]
-  })));
-};
-PieChart.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    [PropTypes.string]: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })).isRequired,
-  title: PropTypes.string.isRequired,
-  valueKey: PropTypes.string.isRequired,
-  labelKey: PropTypes.string.isRequired,
-  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  innerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  outerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-PieChart.defaultProps = {
-  id: undefined,
-  className: undefined,
-  width: '100%',
-  height: 300,
-  innerRadius: '0%',
-  outerRadius: '100%'
-};
-export default PieChart;

package/dist/es/a/Charts/PieChart/index.js

@@ -1 +0,0 @@
-export { default as PieChart } from "./PieChart";

package/dist/es/a/Charts/PieChart/styles.scss

@@ -1,48 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$default-text-font-size: calc(var(--s-1) * 1rem);
-
-.#{bem.$base} {
-  &.pie-chart {
-    background-color: var(--background-far);
-    border-radius: var(--theme-default-border-radius);
-    box-shadow: $default-box-shadow;
-    margin: $default-margin 0;
-    padding: $default-padding;
-
-    .chart-header {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $default-margin;
-
-      h3 {
-        color: var(--subtitle);
-        margin: calc($default-margin / 5);
-        text-align: left;
-      }
-    }
-
-    .chart-content {
-      align-items: flex-start;
-      display: flex;
-    }
-
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-text {
-          fill: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * .75);
-        }
-
-        .recharts-text.recharts-label {
-          fill: var(--paragraph);
-          font-size: $default-text-font-size;
-        }
-      }
-    }
-  }
-}

package/src/stories/a/PieChart.stories.jsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { PieChart } from 'ui'
-
-export default {
-  title    :'a/Charts/PieChart',
-  component:PieChart,
-}
-
-const data = [
-  { status: 'pendingReview', value: 230 },
-  { status: 'accepted', value: 350 },
-  { status: 'rejected', value: 80 },
-  { status: 'toRevise', value: 10 },
-  { status: 'revised', value: 60 },
-]
-
-const Template = (args) => (
-  <div style={{ height: '100%', width: '100%' }}>
-    <PieChart {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  data,
-  valueKey:'value',
-  labelKey:'status',
-  colors  :['#8CB0F8', '#7F7CF6', '#FFD66E', '#E8E9ED', '#F6BC7E'],
-  height  :400,
-}
-
-const TemplateSideBySide = (args) => (
-  <div style={{ display: 'flex', gap: '20px' }}>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <PieChart {...args[0]} />
-    </div>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <PieChart {...args[1]} />
-    </div>
-  </div>
-)
-
-export const SideBySide = TemplateSideBySide.bind({})
-SideBySide.args = [
-  {
-    ...Default.args,
-  },
-  {
-    ...Default.args,
-  },
-]

package/src/ui/a/Charts/PieChart/PieChart.jsx

@@ -1,125 +0,0 @@
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import {
-  PieChart as RechartsPieChart,
-  Pie,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-} from 'recharts'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { CustomLegend, CustomTooltipContent } from '../Common'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'pie-chart'
-
-const PieChart = ({
-  id,
-  className: userClassName,
-  data,
-  title,
-  valueKey,
-  labelKey,
-  colors,
-  height,
-  width,
-  innerRadius,
-  outerRadius,
-}) => {
-  const total = data.reduce((sum, item) => sum + item[valueKey], 0)
-
-  const formattedData = data.map((item) => ({
-    ...item,
-    label     :item[labelKey],
-    color     :colors[data.indexOf(item)],
-    percentage:((item[valueKey] / total) * 100).toFixed(0),
-  }))
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-    >
-      <div className="chart-header">
-        <h3>{title}</h3>
-      </div>
-      <div className="chart-content">
-        <ResponsiveContainer width={width} height={height}>
-          <RechartsPieChart>
-            <Pie
-              data={formattedData}
-              dataKey={valueKey}
-              nameKey={labelKey}
-              cx="50%"
-              cy="50%"
-              innerRadius={innerRadius}
-              outerRadius={outerRadius}
-              label={false}
-              paddingAngle={0}
-            >
-              {formattedData.map((entry, index) => (
-                <Cell
-                  key={entry[labelKey]}
-                  fill={colors[index]}
-                  strokeWidth={0}
-                />
-              ))}
-            </Pie>
-            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
-          </RechartsPieChart>
-        </ResponsiveContainer>
-        <CustomLegend
-          colorsArray={colors}
-          yKeysArray={formattedData}
-          capitalizedLegend
-          orientation="vertical"
-          getLegendItemTitle={(entry) => entry[labelKey]}
-          getLegendItemSubtitle={(entry) => entry[valueKey]}
-        />
-      </div>
-    </div>
-  )
-}
-
-PieChart.propTypes = {
-  id       :PropTypes.string,
-  className:PropTypes.string,
-  data     :PropTypes.arrayOf(PropTypes.shape({
-    [PropTypes.string]:PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  })).isRequired,
-  title      :PropTypes.string.isRequired,
-  valueKey   :PropTypes.string.isRequired,
-  labelKey   :PropTypes.string.isRequired,
-  colors     :PropTypes.arrayOf(PropTypes.string).isRequired,
-  height     :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  width      :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  innerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  outerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-}
-
-PieChart.defaultProps = {
-  id         :undefined,
-  className  :undefined,
-  width      :'100%',
-  height     :300,
-  innerRadius:'0%',
-  outerRadius:'100%',
-}
-
-export default PieChart

package/src/ui/a/Charts/PieChart/index.js

@@ -1 +0,0 @@
-export { default as PieChart } from './PieChart'

package/src/ui/a/Charts/PieChart/styles.scss

@@ -1,48 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$default-text-font-size: calc(var(--s-1) * 1rem);
-
-.#{bem.$base} {
-  &.pie-chart {
-    background-color: var(--background-far);
-    border-radius: var(--theme-default-border-radius);
-    box-shadow: $default-box-shadow;
-    margin: $default-margin 0;
-    padding: $default-padding;
-
-    .chart-header {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $default-margin;
-
-      h3 {
-        color: var(--subtitle);
-        margin: calc($default-margin / 5);
-        text-align: left;
-      }
-    }
-
-    .chart-content {
-      align-items: flex-start;
-      display: flex;
-    }
-
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-text {
-          fill: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * .75);
-        }
-
-        .recharts-text.recharts-label {
-          fill: var(--paragraph);
-          font-size: $default-text-font-size;
-        }
-      }
-    }
-  }
-}