@pie-lib/charting 4.5.11-next.266 → 4.5.11-next.408

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,20 @@ export class TickComponent extends React.Component {
     }
   };
 
+  changeInteractive = (index, value) => {
+    const { categories, onChangeCategory } = this.props;
+    const category = categories[index];
+
+    onChangeCategory(index, { ...category, interactive: !category.interactive });
+  };
+
+  changeEditable = (index, value) => {
+    const { categories, onChangeCategory } = this.props;
+    const category = categories[index];
+
+    onChangeCategory(index, { ...category, editable: !category.editable || false });
+  };
+
   render() {
     const {
       classes,
@@ -33,6 +48,7 @@ export class TickComponent extends React.Component {
       rotate,
       top,
       graphProps,
+      defineChart,
       x,
       y,
       formattedValue
@@ -61,7 +77,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 && (
@@ -81,7 +97,7 @@ export class TickComponent extends React.Component {
           )}
           <MarkLabel
             inputRef={r => (this.input = r)}
-            disabled={!(editable && interactive)}
+            disabled={!editable}
             mark={category}
             graphProps={graphProps}
             onChange={newLabel => this.changeCategory(index, newLabel)}
@@ -113,6 +129,84 @@ 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 && index === 0 && (
+          <text
+            x={x - 80}
+            y={y + 80 + 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">
+              {' '}
+              edit name
+            </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>
+        )}
+        {defineChart && (
+          <foreignObject
+            x={x - 24}
+            y={y + 70 + top}
+            width={barWidth}
+            height={4}
+            style={{ pointerEvents: 'visible', overflow: 'visible' }}
+          >
+            <Checkbox
+              checked={editable}
+              onChange={e => this.changeEditable(index, e.target.checked)}
+            />
+          </foreignObject>
+        )}
       </g>
     );
   }
@@ -168,6 +262,7 @@ export class RawChartAxes extends React.Component {
       onChangeCategory,
       categories = [],
       top,
+      defineChart,
       theme
     } = this.props;
 
@@ -177,6 +272,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 +295,7 @@ export class RawChartAxes extends React.Component {
         barWidth,
         rotate,
         top,
+        defineChart,
         onChangeCategory,
         onChange,
         graphProps,

package/src/chart.jsx

@@ -47,7 +47,6 @@ export class Chart extends React.Component {
     title: PropTypes.string,
     onDataChange: PropTypes.func,
     addCategoryEnabled: PropTypes.bool,
-    editCategoryEnabled: PropTypes.bool,
     categoryDefaultLabel: PropTypes.string,
     theme: PropTypes.object
   };
@@ -127,13 +126,12 @@ export class Chart extends React.Component {
   };
 
   getFilteredCategories = () => {
-    const { data, editCategoryEnabled, addCategoryEnabled } = this.props;
+    const { data, defineChart } = this.props;
 
     return data
       ? data.map(d => ({
           ...d,
-          editable: !d.initial || (d.initial && editCategoryEnabled),
-          deletable: !d.initial || (d.initial && addCategoryEnabled)
+          deletable: defineChart || d.deletable
         }))
       : [];
   };
@@ -150,6 +148,8 @@ 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();
@@ -176,9 +176,10 @@ export class Chart extends React.Component {
         () => this.rootNode
       )
     };
+
     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 + 80 };
     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 ? 80 : 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}