@pie-lib/charting 7.0.4-next.30 → 7.0.4-next.34

package/src/chart-setup.jsx

@@ -0,0 +1,356 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import ChartType from './chart-type';
+import { AlertDialog, NumberTextFieldCustom } from '@pie-lib/config-ui';
+
+export const resetValues = (data, updateModel, range, onChange, model) => {
+  (data || []).forEach((d) => {
+    const d_value_scaled = Math.round(d.value * 10);
+    const range_step_scaled = Math.round(range.step * 10);
+    const remainder_scaled = d_value_scaled % range_step_scaled;
+    const remainder = remainder_scaled / 10;
+
+    if (d.value > range.max || remainder !== 0) {
+      d.value = 0;
+    }
+  });
+
+  if (updateModel) {
+    onChange({ ...model, data });
+  }
+};
+
+const StyledWrapper = styled('div')(() => ({
+  width: '450px',
+}));
+
+const StyledContent = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  marginTop: theme.spacing(3),
+}));
+
+const StyledColumnView = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+}));
+
+const StyledRowView = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+}));
+
+const StyledTextField = styled(NumberTextFieldCustom)(({ theme }) => ({
+  width: '130px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const StyledMediumTextField = styled(NumberTextFieldCustom)(({ theme }) => ({
+  width: '160px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const StyledDimensions = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: `${theme.spacing(3)} 0`,
+}));
+
+const StyledDisabled = styled(Typography)(() => ({
+  color: color.disabled(),
+}));
+
+const ConfigureChartPanel = (props) => {
+  const {
+    model,
+    onChange,
+    chartDimensions,
+    gridValues = {},
+    labelValues = {},
+    studentNewCategoryDefaultLabel = {},
+    availableChartTypes = {},
+    chartTypeLabel,
+  } = props;
+  const [alertDialog, setAlertDialog] = useState({
+    open: false,
+    title: '',
+    text: '',
+    onClose: null,
+    onConfirm: null,
+  });
+  const [open, setOpen] = useState(false);
+  const [rangeKey, setRangeKey] = useState('');
+  const [resetValue, setResetValue] = useState(0);
+
+  const { range = {}, correctAnswer, changeInteractiveEnabled, changeEditableEnabled } = model;
+
+  const size = model.graph;
+  const { showInConfigPanel, width, height } = chartDimensions || {};
+
+  const widthConstraints = {
+    min: width?.min ? Math.max(50, width.min) : 50,
+    max: width?.max ? Math.min(700, width.max) : 700,
+    step: width?.step >= 1 ? Math.min(200, width.step) : 20,
+  };
+  const heightConstraints = {
+    min: height?.min ? Math.max(400, height.min) : 400,
+    max: height?.max ? Math.min(700, height.max) : 700,
+    step: height?.step >= 1 ? Math.min(200, height.step) : 20,
+  };
+
+  const gridOptions = gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
+  const labelOptions = labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
+
+  const stepConfig = (
+    <StyledRowView>
+      <StyledMediumTextField
+        label="Grid Interval"
+        value={range.step}
+        variant="outlined"
+        onChange={(e, v) => onRangeChanged('step', v, e)}
+        {...gridOptions}
+      />
+      <StyledMediumTextField
+        label={'Label Interval'}
+        value={range.labelStep}
+        variant={'outlined'}
+        onChange={(e, v) => onRangeChanged('labelStep', v, e)}
+        {...labelOptions}
+      />
+    </StyledRowView>
+  );
+
+  const handleAlertDialog = (openStatus) => {
+    setAlertDialog((prevState) => ({
+      ...prevState,
+      open: openStatus,
+    }));
+
+    setOpen(openStatus);
+  };
+
+  const setPropertiesToFalse = (data, property) => {
+    return data.map((obj) => {
+      if (Object.prototype.hasOwnProperty.call(obj, property)) {
+        obj[property] = property == 'interactive' ? true : false;
+      }
+      return obj;
+    });
+  };
+
+  const removeOutOfRangeValues = (updateModel) => {
+    const { correctAnswer, data } = model;
+
+    if (changeInteractiveEnabled === false) {
+      setPropertiesToFalse(data, 'interactive');
+    }
+
+    if (changeEditableEnabled === false) {
+      setPropertiesToFalse(data, 'editable');
+    }
+
+    resetValues(data, updateModel, range, onChange, model);
+    resetValues(correctAnswer.data, false, range, onChange, model);
+  };
+
+  const setCategoryDefaultLabel = () => {
+    const studentCategoryDefaultLabel = studentNewCategoryDefaultLabel?.label;
+
+    onChange({ ...model, studentCategoryDefaultLabel });
+  };
+
+  const rangeProps = (chartType) => {
+    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = { ...size, [key]: value };
+
+    onChange({ ...model, graph });
+  };
+
+  const isOutOfRange = (data, range) =>
+    (data || []).find((d) => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0);
+
+  const onRangeChanged = (key, value, e) => {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
+
+    range[key] = value;
+
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      const outOfRange = isOutOfRange(model.data, range) || isOutOfRange(model.correctAnswer.data, range);
+
+      if (outOfRange && e?.target) {
+        setOpen(true);
+      } else {
+        onChange({ ...model, range });
+      }
+    } else {
+      onChange({ ...model, range });
+    }
+  };
+
+  useEffect(() => {
+    removeOutOfRangeValues(true);
+    setCategoryDefaultLabel();
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      setAlertDialog({
+        open: true,
+        title: 'Warning',
+        text: 'This change will remove values defined for one or more categories',
+        onConfirm: () => {
+          removeOutOfRangeValues();
+          handleAlertDialog(false);
+          onChange({ ...model, range, correctAnswer });
+        },
+        onClose: () => {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        },
+      });
+    }
+  }, [open]);
+
+  const isValidPlot = range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
+
+  const getPlotConfiguration = () => {
+    rangeProps.min = 3;
+    rangeProps.max = 10;
+
+    range.max = 10;
+    range.step = 1;
+    range.labelStep = 1;
+
+    onChange({ ...model, range });
+  };
+
+  const onChartTypeChange = (chartType) => {
+    if (chartType.includes('Plot')) {
+      // The selected chart type does not support the current chart configuration
+      if (!isValidPlot) {
+        setAlertDialog({
+          open: true,
+          title: 'Warning',
+          text: 'The selected chart type does not support the current chart configuration. Reset chart configuration?',
+          onConfirm: () => {
+            getPlotConfiguration();
+            removeOutOfRangeValues();
+            handleAlertDialog(false);
+            onChange({ ...model, range, chartType });
+          },
+          onClose: () => {
+            handleAlertDialog(false);
+          },
+        });
+
+        return;
+      }
+
+      rangeProps.min = 3;
+      rangeProps.max = 10;
+
+      onChange({ ...model, chartType });
+
+      return;
+    }
+
+    onChange({ ...model, chartType });
+  };
+
+  return (
+    <StyledWrapper>
+      <Typography variant={'subtitle1'}>Configure Chart</Typography>
+      <StyledContent>
+        <StyledRowView>
+          <ChartType
+            value={model.chartType}
+            onChange={(e) => onChartTypeChange(e.target.value)}
+            availableChartTypes={availableChartTypes}
+            chartTypeLabel={chartTypeLabel}
+          />
+          <StyledMediumTextField
+            label="Max Value"
+            value={range.max}
+            min={rangeProps(model.chartType).min}
+            max={rangeProps(model.chartType).max}
+            variant="outlined"
+            onChange={(e, v) => onRangeChanged('max', v, e)}
+          />
+        </StyledRowView>
+        {!model.chartType.includes('Plot') && stepConfig}
+
+        {showInConfigPanel && (
+          <StyledDimensions>
+            <div>
+              <Typography>Dimensions(px)</Typography>
+            </div>
+
+            <StyledColumnView>
+              <StyledTextField
+                label={'Width'}
+                value={size.width}
+                min={widthConstraints.min}
+                max={widthConstraints.max}
+                step={widthConstraints.step}
+                variant={'outlined'}
+                onChange={(e, v) => onSizeChanged('width', v)}
+              />
+              <StyledDisabled>Min 50, Max 700</StyledDisabled>
+            </StyledColumnView>
+
+            <StyledColumnView>
+              <StyledTextField
+                label={'Height'}
+                value={size.height}
+                min={heightConstraints.min}
+                max={heightConstraints.max}
+                step={heightConstraints.step}
+                variant={'outlined'}
+                onChange={(e, v) => onSizeChanged('height', v)}
+              />
+              <StyledDisabled>Min 400, Max 700</StyledDisabled>
+            </StyledColumnView>
+          </StyledDimensions>
+        )}
+      </StyledContent>
+
+      <AlertDialog
+        open={alertDialog.open}
+        title={alertDialog.title}
+        text={alertDialog.text}
+        onClose={alertDialog.onClose}
+        onConfirm={alertDialog.onConfirm}
+      />
+    </StyledWrapper>
+  );
+};
+
+ConfigureChartPanel.propTypes = {
+  chartDimensions: PropTypes.object,
+  domain: PropTypes.object,
+  gridValues: PropTypes.object,
+  labelValues: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  range: PropTypes.object,
+  chartDimension: PropTypes.object,
+  size: PropTypes.object,
+  studentNewCategoryDefaultLabel: PropTypes.object,
+  availableChartTypes: PropTypes.object,
+  chartTypeLabel: PropTypes.string,
+};
+
+export default ConfigureChartPanel;

package/src/chart-type.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { Select } from '@mui/material';
+import PropTypes from 'prop-types';
+
+const StyledContainer = styled('div')(() => ({
+  width: '160px',
+}));
+
+const StyledFormControl = styled(FormControl)(() => ({
+  width: '160px',
+}));
+
+const StyledInputLabel = styled(InputLabel)(() => ({
+  backgroundColor: 'transparent',
+}));
+
+const ChartType = ({ onChange, value, availableChartTypes, chartTypeLabel }) => (
+  <StyledContainer>
+    <StyledFormControl variant={'outlined'}>
+      <StyledInputLabel id="type-helper-label">{chartTypeLabel}</StyledInputLabel>
+      <Select
+        labelId="type-helper-label"
+        id="type-helper-label-select"
+        name="chartType"
+        value={value}
+        onChange={onChange}
+        label={chartTypeLabel}
+        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+      >
+        {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}
+        {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}
+        {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}
+        {availableChartTypes?.lineCross && <MenuItem value={'lineCross'}>{availableChartTypes.lineCross}</MenuItem>}
+        {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}
+        {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}
+      </Select>
+    </StyledFormControl>
+  </StyledContainer>
+);
+
+ChartType.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+  availableChartTypes: PropTypes.shape({
+    histogram: PropTypes.string,
+    bar: PropTypes.string,
+    lineDot: PropTypes.string,
+    lineCross: PropTypes.string,
+    dotPlot: PropTypes.string,
+    linePlot: PropTypes.string,
+  }),
+  chartTypeLabel: PropTypes.string,
+};
+
+export default ChartType;

package/src/chart-types.js

@@ -0,0 +1,8 @@
+import Bar from './bars/bar';
+import Histogram from './bars/histogram';
+import LineDot from './line/line-dot';
+import LineCross from './line/line-cross';
+import DotPlot from './plot/dot';
+import LinePlot from './plot/line';
+
+export default { Bar, Histogram, LineDot, DotPlot, LinePlot, LineCross };