@pie-lib/charting 7.0.4-next.31 → 7.0.4-next.36

package/src/chart.jsx

@@ -0,0 +1,357 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import debug from 'debug';
+import { cloneDeep } from 'lodash-es';
+
+import { createGraphProps, Root } from '@pie-lib/plot';
+import { AlertDialog } from '@pie-lib/config-ui';
+import ChartGrid from './grid';
+import ChartAxes from './axes';
+import { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';
+import chartTypes from './chart-types';
+import ActionsButton from './actions-button';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const log = debug('pie-lib:charts:chart');
+
+const StyledChartContainer = styled('div')(() => ({
+  width: 'min-content',
+}));
+
+export class Chart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dialog: {
+        open: false,
+      },
+      actionsAnchorEl: null,
+    };
+    this.maskUid = this.generateMaskId();
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    chartType: PropTypes.string.isRequired,
+    size: PropTypes.shape({
+      width: PropTypes.number,
+      height: PropTypes.number,
+    }),
+    domain: PropTypes.shape({
+      label: PropTypes.string,
+      min: PropTypes.number,
+      max: PropTypes.number,
+      axisLabel: PropTypes.string,
+    }),
+    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),
+    range: PropTypes.shape({
+      label: PropTypes.string,
+      min: PropTypes.number,
+      max: PropTypes.number,
+      step: PropTypes.number,
+      labelStep: PropTypes.number,
+      axisLabel: PropTypes.string,
+    }),
+    charts: PropTypes.array,
+    labelsPlaceholders: PropTypes.object,
+    title: PropTypes.string,
+    titlePlaceholder: PropTypes.string,
+    onDataChange: PropTypes.func,
+    onChangeLabels: PropTypes.func,
+    onChangeTitle: PropTypes.func,
+    error: PropTypes.any,
+    addCategoryEnabled: PropTypes.bool,
+    showPixelGuides: PropTypes.bool,
+    categoryDefaultLabel: PropTypes.string,
+    categoryDefaults: PropTypes.object,
+    defineChart: PropTypes.bool,
+    theme: PropTypes.object,
+    chartingOptions: PropTypes.object,
+    changeInteractiveEnabled: PropTypes.bool,
+    changeEditableEnabled: PropTypes.bool,
+    language: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
+    correctData: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.number,
+      }),
+    ),
+  };
+
+  static defaultProps = {
+    size: {
+      width: 480,
+      height: 480,
+    },
+  };
+
+  state = {
+    charts: [
+      chartTypes.Bar(),
+      chartTypes.Histogram(),
+      chartTypes.LineDot(),
+      chartTypes.LineCross(),
+      chartTypes.DotPlot(),
+      chartTypes.LinePlot(),
+    ],
+    autoFocus: false,
+  };
+
+  generateMaskId() {
+    return 'chart-' + (Math.random() * 10000).toFixed();
+  }
+
+  handleAlertDialog = (open, callback) =>
+    this.setState(
+      {
+        dialog: { open },
+      },
+      callback,
+    );
+
+  getChart = () => {
+    const charts = this.props.charts || this.state.charts;
+    let { chartType } = this.props;
+    let ChartComponent = null;
+    let chart = null;
+
+    if (chartType) {
+      chart = charts && charts.find((chart) => chart.type === chartType);
+      ChartComponent = chart && chart.Component;
+    } else {
+      chart = charts && charts[0];
+      ChartComponent = chart && chart.Component;
+      chartType = chart && chart.type;
+    }
+
+    return {
+      type: chartType,
+      ChartComponent,
+    };
+  };
+
+  changeData = (data) => {
+    const { onDataChange } = this.props;
+
+    onDataChange(data);
+  };
+
+  changeCategory = (index, newCategory) => {
+    const integerIndex = parseInt(index, 10);
+
+    if (integerIndex >= 0) {
+      const { data, onDataChange } = this.props;
+      data[integerIndex] = {
+        ...data[integerIndex],
+        ...newCategory,
+      };
+
+      onDataChange(data);
+    }
+  };
+
+  addCategory = () => {
+    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;
+
+    if ((data || []).length > 19) {
+      this.setState({
+        dialog: {
+          open: true,
+          title: translator.t('common:warning', { lng: language }),
+          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),
+          onConfirm: () => this.handleAlertDialog(false),
+        },
+      });
+    } else {
+      this.setState({ autoFocus: true });
+      onDataChange([
+        ...data,
+        {
+          inDefineChart: defineChart,
+          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),
+          value: 0,
+          deletable: true,
+          editable: categoryDefaults ? categoryDefaults?.editable : true,
+          interactive: categoryDefaults ? categoryDefaults?.interactive : true,
+        },
+      ]);
+    }
+  };
+
+  deleteCategory = (index) => {
+    const { data, onDataChange } = this.props;
+
+    if (typeof index !== 'number' || index < 0) {
+      return;
+    }
+
+    if (data && data.length > 0) {
+      onDataChange(data.filter((_, i) => i !== index));
+    }
+  };
+
+  getFilteredCategories = () => {
+    const { data, defineChart } = this.props;
+
+    return data
+      ? data.map((d) => ({
+          ...d,
+          deletable: defineChart || d.deletable,
+        }))
+      : [];
+  };
+
+  resetAutoFocus = () => {
+    this.setState({ autoFocus: false });
+  };
+
+  render() {
+    const {
+      domain = {},
+      range = {},
+      chartingOptions,
+      size,
+      title,
+      onChangeTitle,
+      onChangeLabels,
+      labelsPlaceholders,
+      titlePlaceholder,
+      addCategoryEnabled,
+      changeInteractiveEnabled,
+      changeEditableEnabled,
+      showPixelGuides,
+      error,
+      mathMlOptions = {},
+      language,
+      labelsCharactersLimit,
+      correctData,
+    } = this.props;
+    let { chartType } = this.props;
+
+    const { dialog } = this.state;
+    const defineChart = this.props.defineChart || false;
+
+    const { width, height } = size || {};
+    const labels = { left: range?.label || '', bottom: domain?.label || '' };
+
+    const { ChartComponent } = this.getChart();
+    const categories = this.getFilteredCategories();
+
+    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
+
+    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(correctValues.range, chartType);
+    const common = {
+      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),
+    };
+
+    log('[render] common:', common);
+
+    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 130 };
+    const { scale } = common.graphProps;
+    const xBand = dataToXBand(scale.x, categories, width, chartType);
+
+    const bandWidth = xBand.bandwidth();
+    // for chartType "line", bandWidth will be 0, so we have to calculate it
+    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
+    const increaseHeight = defineChart ? 160 : 60;
+
+    // if there are many categories, we have to rotate their names in order to fit
+    // and we have to add extra value on top of some items
+    const top = getTopPadding(barWidth);
+    const rootCommon = cloneDeep(common);
+    rootCommon.graphProps.size.height += top + increaseHeight;
+
+    // for plot evaluations we need extra space because we render correctness icon below x axis
+    const isPlotEvaluation = (chartType === 'dotPlot' || chartType === 'linePlot') && correctData?.length;
+    const needsExtraHeight = isPlotEvaluation && labels.bottom;
+
+    if (needsExtraHeight) {
+      rootCommon.graphProps.size.height += 25;
+    }
+
+    return (
+      <StyledChartContainer>
+        <Root
+          title={title}
+          onChangeTitle={onChangeTitle}
+          disabledTitle={!defineChart}
+          showTitle={true}
+          showLabels={true}
+          labels={labels}
+          onChangeLabels={onChangeLabels}
+          labelsPlaceholders={labelsPlaceholders}
+          titlePlaceholder={titlePlaceholder}
+          defineChart={defineChart}
+          disabledLabels={!defineChart}
+          isChart={true}
+          showPixelGuides={showPixelGuides}
+          rootRef={(r) => (this.rootNode = r)}
+          mathMlOptions={mathMlOptions}
+          labelsCharactersLimit={labelsCharactersLimit}
+          {...rootCommon}
+        >
+          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
+          <ChartAxes
+            autoFocus={this.state.autoFocus}
+            onAutoFocusUsed={this.resetAutoFocus}
+            {...common}
+            defineChart={defineChart}
+            categories={categories}
+            xBand={xBand}
+            leftAxis={leftAxis}
+            onChange={this.changeData}
+            onChangeCategory={this.changeCategory}
+            chartingOptions={chartingOptions}
+            changeInteractiveEnabled={changeInteractiveEnabled}
+            changeEditableEnabled={changeEditableEnabled}
+            top={top}
+            error={error}
+            showCorrectness={chartType === 'linePlot' || chartType === 'dotPlot'}
+          />
+          {addCategoryEnabled ? (
+            <foreignObject x={width} y={height - 16} width={width} height={height}>
+              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                <ActionsButton
+                  categories={categories}
+                  addCategory={this.addCategory}
+                  deleteCategory={this.deleteCategory}
+                  language={language}
+                />
+              </div>
+            </foreignObject>
+          ) : null}
+          <mask id={`${this.maskUid}`}>
+            <rect {...maskSize} fill="white" />
+          </mask>
+          <g id="marks" mask={`url('#${this.maskUid}')`}>
+            {ChartComponent && (
+              <ChartComponent
+                {...common}
+                data={categories}
+                height={rootCommon.graphProps.size.height}
+                defineChart={defineChart}
+                onChange={this.changeData}
+                onChangeCategory={this.changeCategory}
+                correctData={correctData}
+              />
+            )}
+          </g>
+        </Root>
+        <AlertDialog
+          open={dialog.open}
+          title={dialog.title}
+          text={dialog.text}
+          onClose={dialog.onClose}
+          onConfirm={dialog.onConfirm}
+        />
+      </StyledChartContainer>
+    );
+  }
+}
+
+export default Chart;