@pie-element/fraction-model 6.1.2-next.1 → 6.1.2

package/lib/answer-fraction.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnswerFraction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+const GroupInline = (0, _styles.styled)('div')({
+  alignItems: 'center',
+  display: 'flex',
+  gap: '20px'
+});
+const Group = (0, _styles.styled)('div')({
+  margin: '12px 0'
+});
+const InputLabel = (0, _styles.styled)('label')({
+  display: 'block',
+  marginBottom: '4px'
+});
+const StyledTextField = (0, _styles.styled)(_material.TextField)({
+  width: '120px',
+  maxHeight: '40px',
+  '& [class^="MuiInputBase-root"]': {
+    height: 40,
+    fontSize: '14px'
+  }
+});
+class AnswerFraction extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Function to trigger when value change from number selection
+     * @param {string} key contains event change object
+     * @returns updated answer change object
+     */
+    (0, _defineProperty2.default)(this, "onValueChange", key => event => {
+      let value = parseInt(event?.target?.value);
+      const {
+        model,
+        onAnswerChange,
+        answers
+      } = this.props;
+      const newAnswers = {
+        ...answers
+      };
+      const min = 1;
+      const max = key === 'noOfModel' ? model.maxModelSelected : 9;
+      if (value > max) {
+        value = max;
+      } else if (value < min) {
+        value = min;
+      }
+      newAnswers[key] = value;
+      onAnswerChange(newAnswers);
+    });
+  }
+  render() {
+    const {
+      model,
+      showCorrect,
+      answers,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", null, model.allowedStudentConfig && /*#__PURE__*/_react.default.createElement(GroupInline, null, /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(InputLabel, {
+      htmlFor: 'preview_number-of-models'
+    }, "Number of Models"), /*#__PURE__*/_react.default.createElement(StyledTextField, {
+      id: "preview_number-of-models",
+      inputProps: {
+        min: 1,
+        max: model.maxModelSelected
+      },
+      name: "preview_number-of-models",
+      onChange: this.onValueChange('noOfModel'),
+      type: "number",
+      variant: "outlined",
+      disabled: disabled,
+      value: showCorrect ? model.maxModelSelected : answers.noOfModel
+    })), /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(InputLabel, {
+      htmlFor: 'preview_parts-per-model'
+    }, "Parts per Model"), /*#__PURE__*/_react.default.createElement(StyledTextField, {
+      id: "preview_parts-per-model",
+      inputProps: {
+        min: 1,
+        max: 9
+      },
+      name: "preview_parts-per-model",
+      onChange: this.onValueChange('partsPerModel'),
+      type: "number",
+      variant: "outlined",
+      disabled: disabled,
+      value: showCorrect ? model.partsPerModel : answers.partsPerModel
+    }))));
+  }
+}
+exports.AnswerFraction = AnswerFraction;
+(0, _defineProperty2.default)(AnswerFraction, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  showCorrect: _propTypes.default.bool.isRequired,
+  onAnswerChange: _propTypes.default.func.isRequired,
+  answers: _propTypes.default.object.isRequired
+});
+var _default = exports.default = AnswerFraction;
+//# sourceMappingURL=answer-fraction.js.map

package/lib/answer-fraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"answer-fraction.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","GroupInline","styled","alignItems","display","gap","Group","margin","InputLabel","marginBottom","StyledTextField","TextField","width","maxHeight","height","fontSize","AnswerFraction","React","Component","constructor","args","_defineProperty2","default","key","event","value","parseInt","target","model","onAnswerChange","answers","props","newAnswers","min","max","maxModelSelected","render","showCorrect","disabled","createElement","allowedStudentConfig","htmlFor","id","inputProps","name","onChange","onValueChange","type","variant","noOfModel","partsPerModel","exports","PropTypes","object","isRequired","bool","func","_default"],"sources":["../src/answer-fraction.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { TextField } from '@mui/material';\n\nconst GroupInline = styled('div')({\n  alignItems: 'center',\n  display: 'flex',\n  gap: '20px',\n});\n\nconst Group = styled('div')({\n  margin: '12px 0',\n});\n\nconst InputLabel = styled('label')({\n  display: 'block',\n  marginBottom: '4px',\n});\n\nconst StyledTextField = styled(TextField)({\n  width: '120px',\n  maxHeight: '40px',\n  '& [class^=\"MuiInputBase-root\"]': {\n    height: 40,\n    fontSize: '14px',\n  },\n});\n\nexport class AnswerFraction extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    onAnswerChange: PropTypes.func.isRequired,\n    answers: PropTypes.object.isRequired,\n  };\n\n  /**\n   * Function to trigger when value change from number selection\n   * @param {string} key contains event change object\n   * @returns updated answer change object\n   */\n  onValueChange = (key) => (event) => {\n    let value = parseInt(event?.target?.value);\n    const { model, onAnswerChange, answers } = this.props;\n    const newAnswers = { ...answers };\n    const min = 1;\n    const max = (key === 'noOfModel') ? model.maxModelSelected : 9;\n    if(value > max) {\n      value = max;\n    } else if(value < min) {\n      value = min;\n    }\n    newAnswers[key] = value;\n    onAnswerChange(newAnswers);\n  };\n\n  render() {\n    const { model, showCorrect, answers, disabled } = this.props;\n\n    return (\n      <div>\n        {model.allowedStudentConfig && (\n          <GroupInline>\n            <Group>\n              <InputLabel htmlFor={'preview_number-of-models'}>\n                Number of Models\n              </InputLabel>\n              <StyledTextField\n                id=\"preview_number-of-models\"\n                inputProps={{ min: 1, max: model.maxModelSelected }}\n                name=\"preview_number-of-models\"\n                onChange={this.onValueChange('noOfModel')}\n                type=\"number\"\n                variant=\"outlined\"\n                disabled={disabled}\n                value={showCorrect ? model.maxModelSelected : answers.noOfModel}\n              />\n            </Group>\n            <Group>\n              <InputLabel htmlFor={'preview_parts-per-model'}>\n                Parts per Model\n              </InputLabel>\n              <StyledTextField\n                id=\"preview_parts-per-model\"\n                inputProps={{ min: 1, max: 9 }}\n                name=\"preview_parts-per-model\"\n                onChange={this.onValueChange('partsPerModel')}\n                type=\"number\"\n                variant=\"outlined\"\n                disabled={disabled}\n                value={showCorrect ? model.partsPerModel : answers.partsPerModel}\n              />\n            </Group>\n          </GroupInline>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default AnswerFraction;\n"],"mappings":"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","ignoreList":[]}

package/lib/fraction-model-chart.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _styles = require("@mui/material/styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PieChartParentDiv = (0, _styles.styled)('div')({
+  display: 'grid',
+  gridTemplateColumns: '200px 200px 200px',
+  gap: '10px',
+  padding: '5px 0'
+});
+const BarChartParentDiv = (0, _styles.styled)('div')({
+  display: 'grid',
+  gridTemplateColumns: '200px 200px 200px',
+  gap: '20px',
+  padding: '10px 0'
+});
+const StyledPieChart = (0, _styles.styled)(_recharts.PieChart)({
+  '& .recharts-pie-sector': {
+    outline: 'none !important',
+    '&:focus': {
+      outline: 'none !important'
+    }
+  }
+});
+const FractionModelChart = props => {
+  /*
+   * Function to handle click event on chart
+   * @param chartIndex: index of the chart
+   * @param sectorIndex: index of the sector
+   * */
+  const handleChartClick = (chartIndex, sectorIndex) => {
+    if (typeof sectorIndex === 'string') {
+      sectorIndex = parseInt(sectorIndex);
+    }
+    const existingIndex = clickedIndexArray.findIndex(item => item.id === chartIndex);
+    let newClickedIndexArray;
+    if (existingIndex >= 0) {
+      const currentItem = clickedIndexArray[existingIndex];
+      if (currentItem.value === sectorIndex) {
+        newClickedIndexArray = clickedIndexArray.filter((_, index) => index !== existingIndex);
+      } else {
+        newClickedIndexArray = [...clickedIndexArray.slice(0, existingIndex), {
+          id: chartIndex,
+          value: sectorIndex
+        }, ...clickedIndexArray.slice(existingIndex + 1)];
+      }
+    } else {
+      newClickedIndexArray = [...clickedIndexArray, {
+        id: chartIndex,
+        value: sectorIndex
+      }];
+    }
+    onChange(newClickedIndexArray);
+    setClickedIndexArray(newClickedIndexArray);
+  };
+
+  /*
+   * Function to handle mouse enter event on chart
+   * @param chartIndex: index of the chart
+   * @param sectorIndex: index of the sector
+   * */
+  const handleChartMouseEnter = (chartIndex, sectorIndex) => {
+    setHoveredIndex(chartIndex + '-' + sectorIndex);
+  };
+
+  /*
+   * Function to handle mouse leave event on chart
+   * */
+  const handleChartMouseLeave = () => {
+    setHoveredIndex(null);
+  };
+
+  /*
+   * Function to get fill color for sector
+   * @param hoveredIndex: hovered index
+   * @param selection: selected index
+   * */
+  const getSectorFill = (hoveredIndex, selection) => {
+    const [selectionId, selectionValue] = selection.split('-').map(Number);
+    // Check for a matching clicked item
+    const clickedItem = clickedIndexArray.find(item => item.id === selectionId);
+    if (clickedItem && selectionValue <= clickedItem.value) {
+      return 'rgb(60, 73, 150, 0.6)';
+    }
+    // Check for a matching hovered index
+    if (hoveredIndex) {
+      const [hoveredId, hoveredValue] = hoveredIndex.split('-').map(Number);
+      if (hoveredId === selectionId && hoveredValue >= selectionValue) {
+        return 'rgb(0, 0, 0, 0.25)';
+      }
+    }
+    return '#FFFFFF';
+  };
+
+  /*
+   * Function to render label for pie chart
+   * @param props: properties of the label
+   * */
+  const renderCustomizedLabelForPie = props => {
+    const {
+      cx,
+      cy,
+      midAngle,
+      outerRadius,
+      index
+    } = props;
+    const RADIAN = Math.PI / 180;
+    // const radius = outerRadius * 0.5;  //If you want to show label inside the pie
+    const radius = outerRadius * 1.13;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return /*#__PURE__*/_react.default.createElement("text", {
+      x: x,
+      y: y,
+      fill: "#000000",
+      textAnchor: x > cx ? 'start' : 'end',
+      dominantBaseline: "central"
+    }, `${(index + 1).toFixed(0)}`);
+  };
+
+  /*
+   * Function to create and return component for bar chart
+   * */
+  const barWithBorder = () => {
+    return props => {
+      const {
+        fill,
+        x,
+        y,
+        width,
+        height
+      } = props;
+      return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        stroke: '#000000',
+        fill: fill
+      }));
+    };
+  };
+  const {
+    value = [],
+    modelType = 'bar',
+    noOfModels = 0,
+    partsPerModel = 0,
+    showLabel = false,
+    disabled = false,
+    onChange
+  } = props;
+  const [hoveredIndex, setHoveredIndex] = (0, _react.useState)(null);
+  const [clickedIndexArray, setClickedIndexArray] = (0, _react.useState)(value);
+
+  /*
+   * Function to create and return bar fraction model
+   * */
+  const getBarFractionModel = () => {
+    const parentData = [];
+    // Generate data for bar chart
+    for (let i = 1; i < noOfModels + 1; i++) {
+      const data = [{
+        name: i
+      }];
+      for (let j = 1; j < partsPerModel + 1; j++) {
+        data[0][`${j}`] = 1;
+      }
+      parentData.push(data);
+    }
+    let barItems = [];
+    parentData.forEach((data, chartIndex) => {
+      barItems.push(/*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+        width: 200,
+        height: 30 * partsPerModel,
+        data: data,
+        key: `bar-chart-${chartIndex + 1}`
+      }, /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
+        hide: true,
+        type: "number",
+        domain: [0, partsPerModel]
+      }), Object.keys(data[0]).map((key, index) => {
+        if (key !== 'name') {
+          return /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+            dataKey: key,
+            stackId: "a",
+            key: `bar-${chartIndex + 1}-${index + 1}`,
+            onClick: disabled ? null : () => handleChartClick(chartIndex + 1, key),
+            onMouseEnter: disabled ? null : () => handleChartMouseEnter(chartIndex + 1, key),
+            onMouseLeave: disabled ? null : () => handleChartMouseLeave(chartIndex + 1, key),
+            shape: barWithBorder(),
+            isAnimationActive: false,
+            fill: getSectorFill(hoveredIndex, `${chartIndex + 1}-${key}`)
+          }, showLabel && /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+            position: "left",
+            fill: "#000000"
+          }));
+        }
+      })));
+    });
+    return /*#__PURE__*/_react.default.createElement(BarChartParentDiv, null, barItems);
+  };
+  const pieChartRef = (0, _react.useRef)(null);
+
+  /*
+   * Function to create and return pie fraction model
+   * */
+  const getPieFractionModel = () => {
+    const parentData = [];
+    // Generate data for pie chart
+    for (let i = 1; i < noOfModels + 1; i++) {
+      const data = Array.from({
+        length: partsPerModel
+      }, (_, index) => ({
+        name: `${index + 1}`,
+        value: 1
+      }));
+      parentData.push(data);
+    }
+    let pieItems = [];
+    parentData.forEach((data, chartIndex) => {
+      pieItems.push(/*#__PURE__*/_react.default.createElement(StyledPieChart, {
+        width: 200,
+        height: 200,
+        key: `pie-chart-${chartIndex}`
+      }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
+        data: data,
+        key: `pie-${chartIndex + 1}`,
+        fill: "#FFFFFF",
+        stroke: "#000000",
+        dataKey: "value",
+        startAngle: 90,
+        endAngle: -270,
+        isAnimationActive: false,
+        labelLine: false,
+        label: showLabel && renderCustomizedLabelForPie
+      }, data.map((entry, sectorIndex) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+        key: `${chartIndex + 1}-${sectorIndex + 1}`,
+        onClick: disabled ? null : () => handleChartClick(chartIndex + 1, sectorIndex + 1),
+        onMouseEnter: disabled ? null : () => handleChartMouseEnter(chartIndex + 1, sectorIndex + 1),
+        onMouseLeave: disabled ? null : () => handleChartMouseLeave(chartIndex + 1, sectorIndex + 1),
+        fill: getSectorFill(hoveredIndex, `${chartIndex + 1}-${sectorIndex + 1}`),
+        style: {
+          outline: 'none',
+          cursor: disabled ? 'default' : 'pointer'
+        }
+      })))));
+    });
+    return /*#__PURE__*/_react.default.createElement(PieChartParentDiv, {
+      ref: pieChartRef
+    }, pieItems);
+  };
+
+  //Render bar or pie models as per model type
+  if (modelType === 'bar') {
+    return getBarFractionModel();
+  } else if (modelType === 'pie') {
+    //Remove the last sector line of pie chart if parts per model is 1
+    (0, _react.useEffect)(() => {
+      if (pieChartRef?.current && partsPerModel === 1) {
+        const paths = pieChartRef.current.querySelectorAll('path');
+        if (paths.length > 0) {
+          paths.forEach(path => {
+            let d = path.getAttribute('d');
+            path.setAttribute('d', d.replaceAll('L 100,100', ''));
+          });
+        }
+      }
+    }, []);
+    return getPieFractionModel();
+  }
+};
+var _default = exports.default = FractionModelChart;
+//# sourceMappingURL=fraction-model-chart.js.map

package/lib/fraction-model-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fraction-model-chart.js","names":["_react","_interopRequireWildcard","require","_recharts","_styles","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PieChartParentDiv","styled","display","gridTemplateColumns","gap","padding","BarChartParentDiv","StyledPieChart","PieChart","outline","FractionModelChart","props","handleChartClick","chartIndex","sectorIndex","parseInt","existingIndex","clickedIndexArray","findIndex","item","id","newClickedIndexArray","currentItem","value","filter","_","index","slice","onChange","setClickedIndexArray","handleChartMouseEnter","setHoveredIndex","handleChartMouseLeave","getSectorFill","hoveredIndex","selection","selectionId","selectionValue","split","map","Number","clickedItem","find","hoveredId","hoveredValue","renderCustomizedLabelForPie","cx","cy","midAngle","outerRadius","RADIAN","Math","PI","radius","x","cos","y","sin","createElement","fill","textAnchor","dominantBaseline","toFixed","barWithBorder","width","height","stroke","modelType","noOfModels","partsPerModel","showLabel","disabled","useState","getBarFractionModel","parentData","data","name","j","push","barItems","forEach","BarChart","key","YAxis","hide","type","domain","keys","Bar","dataKey","stackId","onClick","onMouseEnter","onMouseLeave","shape","isAnimationActive","LabelList","position","pieChartRef","useRef","getPieFractionModel","Array","from","length","pieItems","Pie","startAngle","endAngle","labelLine","label","entry","Cell","style","cursor","ref","useEffect","current","paths","querySelectorAll","path","d","getAttribute","setAttribute","replaceAll","_default","exports"],"sources":["../src/fraction-model-chart.jsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { Bar, BarChart, Cell, LabelList, Pie, PieChart, YAxis } from 'recharts';\nimport { styled } from '@mui/material/styles';\n\nconst PieChartParentDiv = styled('div')({\n  display: 'grid',\n  gridTemplateColumns: '200px 200px 200px',\n  gap: '10px',\n  padding: '5px 0',\n});\n\nconst BarChartParentDiv = styled('div')({\n  display: 'grid',\n  gridTemplateColumns: '200px 200px 200px',\n  gap: '20px',\n  padding: '10px 0',\n});\n\nconst StyledPieChart = styled(PieChart)({\n  '& .recharts-pie-sector': {\n    outline: 'none !important',\n    '&:focus': {\n      outline: 'none !important',\n    },\n  },\n});\n\nconst FractionModelChart = (props) => {\n  /*\n   * Function to handle click event on chart\n   * @param chartIndex: index of the chart\n   * @param sectorIndex: index of the sector\n   * */\n  const handleChartClick = (chartIndex, sectorIndex) => {\n    if (typeof sectorIndex === 'string') {\n      sectorIndex = parseInt(sectorIndex);\n    }\n    const existingIndex = clickedIndexArray.findIndex((item) => item.id === chartIndex);\n    let newClickedIndexArray;\n    if (existingIndex >= 0) {\n      const currentItem = clickedIndexArray[existingIndex];\n      if (currentItem.value === sectorIndex) {\n        newClickedIndexArray = clickedIndexArray.filter((_, index) => index !== existingIndex);\n      } else {\n        newClickedIndexArray = [\n          ...clickedIndexArray.slice(0, existingIndex),\n          { id: chartIndex, value: sectorIndex },\n          ...clickedIndexArray.slice(existingIndex + 1),\n        ];\n      }\n    } else {\n      newClickedIndexArray = [...clickedIndexArray, { id: chartIndex, value: sectorIndex }];\n    }\n    onChange(newClickedIndexArray);\n    setClickedIndexArray(newClickedIndexArray);\n  };\n\n  /*\n   * Function to handle mouse enter event on chart\n   * @param chartIndex: index of the chart\n   * @param sectorIndex: index of the sector\n   * */\n  const handleChartMouseEnter = (chartIndex, sectorIndex) => {\n    setHoveredIndex(chartIndex + '-' + sectorIndex);\n  };\n\n  /*\n   * Function to handle mouse leave event on chart\n   * */\n  const handleChartMouseLeave = () => {\n    setHoveredIndex(null);\n  };\n\n  /*\n   * Function to get fill color for sector\n   * @param hoveredIndex: hovered index\n   * @param selection: selected index\n   * */\n  const getSectorFill = (hoveredIndex, selection) => {\n    const [selectionId, selectionValue] = selection.split('-').map(Number);\n    // Check for a matching clicked item\n    const clickedItem = clickedIndexArray.find((item) => item.id === selectionId);\n    if (clickedItem && selectionValue <= clickedItem.value) {\n      return 'rgb(60, 73, 150, 0.6)';\n    }\n    // Check for a matching hovered index\n    if (hoveredIndex) {\n      const [hoveredId, hoveredValue] = hoveredIndex.split('-').map(Number);\n      if (hoveredId === selectionId && hoveredValue >= selectionValue) {\n        return 'rgb(0, 0, 0, 0.25)';\n      }\n    }\n    return '#FFFFFF';\n  };\n\n  /*\n   * Function to render label for pie chart\n   * @param props: properties of the label\n   * */\n  const renderCustomizedLabelForPie = (props) => {\n    const { cx, cy, midAngle, outerRadius, index } = props;\n    const RADIAN = Math.PI / 180;\n    // const radius = outerRadius * 0.5;  //If you want to show label inside the pie\n    const radius = outerRadius * 1.13;\n    const x = cx + radius * Math.cos(-midAngle * RADIAN);\n    const y = cy + radius * Math.sin(-midAngle * RADIAN);\n    return (\n      <text x={x} y={y} fill=\"#000000\" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline=\"central\">\n        {`${(index + 1).toFixed(0)}`}\n      </text>\n    );\n  };\n\n  /*\n   * Function to create and return component for bar chart\n   * */\n  const barWithBorder = () => {\n    return (props) => {\n      const { fill, x, y, width, height } = props;\n      return (\n        <g>\n          <rect x={x} y={y} width={width} height={height} stroke={'#000000'} fill={fill} />\n        </g>\n      );\n    };\n  };\n\n  const {\n    value = [],\n    modelType = 'bar',\n    noOfModels = 0,\n    partsPerModel = 0,\n    showLabel = false,\n    disabled = false,\n    onChange,\n  } = props;\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  const [clickedIndexArray, setClickedIndexArray] = useState(value);\n\n  /*\n   * Function to create and return bar fraction model\n   * */\n  const getBarFractionModel = () => {\n    const parentData = [];\n    // Generate data for bar chart\n    for (let i = 1; i < noOfModels + 1; i++) {\n      const data = [{ name: i }];\n      for (let j = 1; j < partsPerModel + 1; j++) {\n        data[0][`${j}`] = 1;\n      }\n      parentData.push(data);\n    }\n    let barItems = [];\n    parentData.forEach((data, chartIndex) => {\n      barItems.push(\n        <BarChart width={200} height={30 * partsPerModel} data={data} key={`bar-chart-${chartIndex + 1}`}>\n          <YAxis hide={true} type=\"number\" domain={[0, partsPerModel]} />\n          {Object.keys(data[0]).map((key, index) => {\n            if (key !== 'name') {\n              return (\n                <Bar\n                  dataKey={key}\n                  stackId=\"a\"\n                  key={`bar-${chartIndex + 1}-${index + 1}`}\n                  onClick={disabled ? null : () => handleChartClick(chartIndex + 1, key)}\n                  onMouseEnter={disabled ? null : () => handleChartMouseEnter(chartIndex + 1, key)}\n                  onMouseLeave={disabled ? null : () => handleChartMouseLeave(chartIndex + 1, key)}\n                  shape={barWithBorder()}\n                  isAnimationActive={false}\n                  fill={getSectorFill(hoveredIndex, `${chartIndex + 1}-${key}`)}\n                >\n                  {showLabel && <LabelList position=\"left\" fill=\"#000000\" />}\n                </Bar>\n              );\n            }\n          })}\n        </BarChart>,\n      );\n    });\n    return <BarChartParentDiv>{barItems}</BarChartParentDiv>;\n  };\n\n  const pieChartRef = useRef(null);\n  \n  /*\n   * Function to create and return pie fraction model\n   * */\n  const getPieFractionModel = () => {\n    const parentData = [];\n    // Generate data for pie chart\n    for (let i = 1; i < noOfModels + 1; i++) {\n      const data = Array.from({ length: partsPerModel }, (_, index) => ({\n        name: `${index + 1}`,\n        value: 1,\n      }));\n      parentData.push(data);\n    }\n    let pieItems = [];\n    parentData.forEach((data, chartIndex) => {\n      pieItems.push(\n        <StyledPieChart width={200} height={200} key={`pie-chart-${chartIndex}`}>\n          <Pie\n            data={data}\n            key={`pie-${chartIndex + 1}`}\n            fill=\"#FFFFFF\"\n            stroke=\"#000000\"\n            dataKey=\"value\"\n            startAngle={90}\n            endAngle={-270}\n            isAnimationActive={false}\n            labelLine={false}\n            label={showLabel && renderCustomizedLabelForPie}\n          >\n            {data.map((entry, sectorIndex) => (\n              <Cell\n                key={`${chartIndex + 1}-${sectorIndex + 1}`}\n                onClick={disabled ? null : () => handleChartClick(chartIndex + 1, sectorIndex + 1)}\n                onMouseEnter={disabled ? null : () => handleChartMouseEnter(chartIndex + 1, sectorIndex + 1)}\n                onMouseLeave={disabled ? null : () => handleChartMouseLeave(chartIndex + 1, sectorIndex + 1)}\n                fill={getSectorFill(hoveredIndex, `${chartIndex + 1}-${sectorIndex + 1}`)}\n                style={{ outline: 'none', cursor: disabled ? 'default' : 'pointer' }}\n              />\n            ))}\n          </Pie>\n        </StyledPieChart>,\n      );\n    });\n    return <PieChartParentDiv ref={pieChartRef}>{pieItems}</PieChartParentDiv>;\n  };\n\n  //Render bar or pie models as per model type\n  if (modelType === 'bar') {\n    return getBarFractionModel();\n  } else if (modelType === 'pie') {\n    //Remove the last sector line of pie chart if parts per model is 1\n    useEffect(() => {\n      if (pieChartRef?.current && partsPerModel === 1){\n        const paths = pieChartRef.current.querySelectorAll('path');\n        if (paths.length > 0) {\n          paths.forEach((path) => {\n            let d = path.getAttribute('d');\n            path.setAttribute('d', d.replaceAll('L 100,100', ''));\n          });\n        }\n      }\n    }, []);\n    return getPieFractionModel();\n  }\n};\n\nexport default FractionModelChart;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FractionModelChart", {
+  enumerable: true,
+  get: function () {
+    return _fractionModelChart.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _main = _interopRequireDefault(require("./main"));
+var _lodashEs = require("lodash-es");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _fractionModelChart = _interopRequireDefault(require("./fraction-model-chart"));
+// Export FractionModelChart for use in configure
+
+class FractionModel extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this._render();
+  }
+  get model() {
+    return this._model;
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+
+  /*
+   * Method to check if student answered the question
+   * @param {session} session contains the session object
+   * @param {model} model contains the model object
+   * */
+  isSessionComplete(session, model) {
+    const answers = session && session.answers;
+    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;
+    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;
+    return configComplete && responseComplete;
+  }
+
+  /*
+   * Session change event handler
+   * @param {session} session contains the session object
+   * */
+  onSessionChange(session) {
+    this._session.answers = session && session.answers;
+    const complete = this.isSessionComplete(this._session, this._model);
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (this._model && this._session) {
+      let model = (0, _lodashEs.cloneDeep)(this._model);
+      const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+        model,
+        session: this._session,
+        onSessionChange: this.onSessionChange.bind(this)
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = FractionModel;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_piePlayerEvents","_main","_lodashEs","_mathRendering","_fractionModelChart","FractionModel","HTMLElement","constructor","_root","model","m","_model","_render","session","s","_session","isSessionComplete","answers","configComplete","allowedStudentConfig","noOfModel","partsPerModel","responseComplete","Array","isArray","response","length","onSessionChange","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","cloneDeep","el","React","createElement","Main","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport { cloneDeep } from 'lodash-es';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport FractionModelChart from './fraction-model-chart';\n\n// Export FractionModelChart for use in configure\nexport { FractionModelChart };\n\nexport default class FractionModel extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  get model() {\n    return this._model;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  /*\n   * Method to check if student answered the question\n   * @param {session} session contains the session object\n   * @param {model} model contains the model object\n   * */\n  isSessionComplete(session, model) {\n    const answers = session && session.answers;\n    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;\n    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;\n    return configComplete && responseComplete;\n  }\n\n  /*\n   * Session change event handler\n   * @param {session} session contains the session object\n   * */\n  onSessionChange(session) {\n    this._session.answers = session && session.answers;\n    const complete = this.isSessionComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      let model = cloneDeep(this._model);\n      const el = React.createElement(Main, {\n        model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}