@pie-lib/charting 4.5.13 → 4.5.16

package/src/axes.jsx

@@ -6,6 +6,7 @@ import { color } from '@pie-lib/render-ui';
 import { AxisLeft, AxisBottom } from '@vx/axis';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
+import Checkbox from '@material-ui/core/Checkbox';
 
 export class TickComponent extends React.Component {
   changeCategory = (index, newLabel) => {
@@ -23,6 +24,13 @@ export class TickComponent extends React.Component {
     }
   };
 
+  changeInteractive = (index, value) => {
+    const { categories, onChangeCategory } = this.props;
+    const category = categories[index];
+
+    onChangeCategory(index, { ...category, interactive: !category.interactive });
+  };
+
   render() {
     const {
       classes,
@@ -33,6 +41,7 @@ export class TickComponent extends React.Component {
       rotate,
       top,
       graphProps,
+      defineChart,
       x,
       y,
       formattedValue
@@ -61,7 +70,7 @@ export class TickComponent extends React.Component {
           x={bandWidth ? barX : x - barWidth / 2}
           y={6}
           width={barWidth}
-          height={24}
+          height={4}
           style={{ pointerEvents: 'none', overflow: 'visible' }}
         >
           {index === 0 && (
@@ -89,6 +98,16 @@ export class TickComponent extends React.Component {
             rotate={rotate}
             correctness={correctness}
           />
+          <MarkLabel
+            inputRef={r => (this.input = r)}
+            disabled={!(editable && interactive)}
+            mark={category}
+            graphProps={graphProps}
+            onChange={newLabel => this.changeCategory(index, newLabel)}
+            barWidth={barWidth}
+            rotate={rotate}
+            correctness={correctness}
+          />
         </foreignObject>
         {deletable && !correctness && (
           <line
@@ -113,6 +132,45 @@ export class TickComponent extends React.Component {
             <path d="M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z" />
           </svg>
         )}
+        {defineChart && index === 0 && (
+          <text
+            x={x - 80}
+            y={y + 40 + top}
+            width={barWidth}
+            height={4}
+            style={{
+              position: 'absolute',
+              pointerEvents: 'none',
+              wordBreak: 'break-word',
+              overflow: 'visible',
+              maxWidth: barWidth,
+              display: 'inline-block'
+            }}
+          >
+            <tspan x="0" dy=".6em">
+              {' '}
+              Student can{' '}
+            </tspan>
+            <tspan x="0" dy="1.2em">
+              {' '}
+              set value
+            </tspan>
+          </text>
+        )}
+        {defineChart && (
+          <foreignObject
+            x={x - 24}
+            y={y + 20 + top}
+            width={barWidth}
+            height={4}
+            style={{ pointerEvents: 'visible', overflow: 'visible' }}
+          >
+            <Checkbox
+              checked={interactive}
+              onChange={e => this.changeInteractive(index, e.target.checked)}
+            />
+          </foreignObject>
+        )}
       </g>
     );
   }
@@ -168,6 +226,7 @@ export class RawChartAxes extends React.Component {
       onChangeCategory,
       categories = [],
       top,
+      defineChart,
       theme
     } = this.props;
 
@@ -177,6 +236,7 @@ export class RawChartAxes extends React.Component {
 
     const bottomScale =
       xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
+
     const bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();
     // for chartType "line", bandWidth will be 0, so we have to calculate it
     const barWidth = bandWidth || (scale.x && scale.x(domain.max) / categories.length);
@@ -199,6 +259,7 @@ export class RawChartAxes extends React.Component {
         barWidth,
         rotate,
         top,
+        defineChart,
         onChangeCategory,
         onChange,
         graphProps,

package/src/chart.jsx

@@ -150,6 +150,7 @@ export class Chart extends React.Component {
       theme
     } = this.props;
     let { chartType } = this.props;
+    const defineChart = this.props.defineChart || false;
     const { width, height } = size || {};
 
     const { ChartComponent } = this.getChart();
@@ -178,7 +179,7 @@ export class Chart extends React.Component {
     };
     log('[render] common:', common);
 
-    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 20 };
+    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 50 };
     const { scale } = common.graphProps;
     const xBand = dataToXBand(scale.x, categories, width, chartType);
 
@@ -189,12 +190,13 @@ export class Chart extends React.Component {
     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 ? 50 : 0;
 
     // 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;
+    rootCommon.graphProps.size.height += top + increaseHeight;
 
     return (
       <div className={classNames(classes.class, className)}>
@@ -214,6 +216,7 @@ export class Chart extends React.Component {
           />
           <ChartAxes
             {...common}
+            defineChart={defineChart}
             categories={categories}
             xBand={xBand}
             leftAxis={leftAxis}

package/src/utils.js

@@ -81,6 +81,21 @@ export const crowdedTicks = (rangeMax, customLabelStep, size, labelFontSize) =>
   return size.height / numberOfSegments < labelFontSize && size.height / numberOfSegments > 0.5;
 };
 
+// multiply values with 10^number_of_decimals if needed because modulo function(%) is only defined for integers
+const modulo = (a, b) => {
+  if (Number.isInteger(b)) {
+    return a % b;
+  }
+
+  const decimals = b
+    .toString()
+    .split('.')
+    .pop().length;
+  const aux = Math.pow(10, decimals);
+
+  return (a * aux) % (b * aux);
+};
+
 export const getDomainAndRangeByChartType = (domain, range, size, chartType, labelFontSize) => {
   let { step, labelStep, min, max } = range || {};
 
@@ -120,7 +135,7 @@ export const getDomainAndRangeByChartType = (domain, range, size, chartType, lab
     }
   }
 
-  if (max % step !== 0) {
+  if (modulo(max, step) !== 0) {
     max = max + step;
   }