@dhis2/analytics 26.2.0-alpha.2 → 26.2.0-cumulative-values-alpha.1

package/build/cjs/visualizations/config/generators/dhis/singleValue.js.xp1

@@ -0,0 +1,478 @@
+import { colors, spacers } from '@dhis2/ui'
+import {
+    FONT_STYLE_VISUALIZATION_TITLE,
+    FONT_STYLE_VISUALIZATION_SUBTITLE,
+    FONT_STYLE_OPTION_FONT_SIZE,
+    FONT_STYLE_OPTION_TEXT_COLOR,
+    FONT_STYLE_OPTION_TEXT_ALIGN,
+    FONT_STYLE_OPTION_ITALIC,
+    FONT_STYLE_OPTION_BOLD,
+    TEXT_ALIGN_LEFT,
+    TEXT_ALIGN_RIGHT,
+    TEXT_ALIGN_CENTER,
+    mergeFontStyleWithDefault,
+    defaultFontStyle,
+} from '../../../../modules/fontStyle.js'
+import {
+    getColorByValueFromLegendSet,
+    LEGEND_DISPLAY_STYLE_FILL,
+} from '../../../../modules/legends.js'
+
+const svgNS = 'http://www.w3.org/2000/svg'
+
+const generateValueSVG = ({
+    formattedValue,
+    subText,
+    valueColor,
+    icon,
+    noData,
+    containerWidth,
+    containerHeight,
+}) => {
+    const ratio = containerHeight / containerWidth
+    const iconSize = containerHeight * 0.8 //300
+    const iconPadding = 50
+    const textSize = iconSize * 0.85
+    const textWidth = textSize * 0.75 * formattedValue.length
+
+    const showIcon = icon && formattedValue !== noData.text
+
+    let viewBoxWidth = textWidth
+
+    if (showIcon) {
+        viewBoxWidth += iconSize + iconPadding
+    }
+
+    const viewBoxHeight = viewBoxWidth * ratio
+
+    const svgValue = document.createElementNS(svgNS, 'svg')
+    svgValue.setAttribute('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`)
+    svgValue.setAttribute('width', containerWidth * 0.98)
+    svgValue.setAttribute('height', containerHeight * 0.98)
+    svgValue.setAttribute('x', '50%')
+    svgValue.setAttribute('y', '50%')
+    svgValue.setAttribute('style', 'overflow: visible')
+
+    let fillColor = colors.grey900
+
+    if (valueColor) {
+        fillColor = valueColor
+    } else if (formattedValue === noData.text) {
+        fillColor = colors.grey600
+    }
+
+    const group = document.createElementNS(svgNS, 'g')
+    //group.setAttribute('font-size', '4em') // XXX
+    group.setAttribute('style', `color: ${fillColor}`)
+
+    // show icon if configured in maintenance app
+    if (showIcon) {
+        const iconSvgNode = document.createElementNS(svgNS, 'svg')
+        iconSvgNode.setAttribute('width', iconSize)
+        iconSvgNode.setAttribute('height', iconSize)
+        iconSvgNode.setAttribute('viewBox', '0 0 48 48')
+        iconSvgNode.setAttribute('y', `-${iconSize / 2}`)
+        iconSvgNode.setAttribute('x', `-${(textWidth + iconPadding) / 2}`)
+        //iconSvgNode.setAttribute('style', `color: ${fillColor}`)
+
+        // embed icon to allow changing color
+        // (elements with fill need to use "currentColor" for this to work)
+        fetch(icon)
+            .then((res) => res.text())
+            .then((originalSvgIcon) =>
+                originalSvgIcon.replaceAll('#333333', 'currentColor')
+            )
+            .then((svgIcon) => {
+                const parser = new DOMParser()
+                const svgIconDocument = parser.parseFromString(
+                    svgIcon,
+                    'image/svg+xml'
+                )
+
+                Array.from(svgIconDocument.documentElement.children).forEach(
+                    (node) => {
+                        console.log('appending', node)
+
+                        iconSvgNode.appendChild(node)
+                    }
+                )
+                /*
+                Array.from(svgIconDocument.documentElement.childNodes).forEach((node) => {
+                    console.log('appending', node)
+                    iconSvgNode.appendChild(node)
+                })
+*/
+                //iconSvgNode.insertAdjacentHTML('beforeend', svgIcon)
+                //group.insertAdjacentHTML('beforeend', svgIcon)
+                group.appendChild(iconSvgNode)
+            })
+
+        //svgValue.appendChild(iconSvgNode)
+    }
+
+    const textNode = document.createElementNS(svgNS, 'text')
+    //textNode.setAttribute('font-size', textSize)
+    textNode.setAttribute('font-weight', '300')
+    textNode.setAttribute('letter-spacing', '-5')
+    textNode.setAttribute(
+        'x',
+        showIcon ? `-${(textWidth - iconPadding) / 2 - iconSize}` : 0
+    )
+    textNode.setAttribute('y', 0)
+    textNode.setAttribute('fill', fillColor)
+    textNode.setAttribute('alignment-baseline', 'central')
+    textNode.setAttribute('data-test', 'visualization-primary-value')
+
+    if (!showIcon) {
+        textNode.setAttribute('text-anchor', 'middle')
+    }
+
+    textNode.appendChild(document.createTextNode(formattedValue))
+
+    //    svgValue.appendChild(textNode)
+    group.appendChild(textNode)
+
+    // XXX
+    svgValue.appendChild(group)
+
+    if (subText) {
+        const subTextSize = 40
+
+        const subTextNode = document.createElementNS(svgNS, 'text')
+        subTextNode.setAttribute('text-anchor', 'middle')
+        subTextNode.setAttribute('font-size', subTextSize)
+        subTextNode.setAttribute('y', iconSize / 2)
+        subTextNode.setAttribute('fill', colors.grey600)
+        subTextNode.setAttribute('alignment-baseline', 'hanging')
+        subTextNode.appendChild(document.createTextNode(subText))
+
+        svgValue.appendChild(subTextNode)
+    }
+
+    return svgValue
+}
+
+const generateDashboardItem = (
+    config,
+    {
+        svgContainer,
+        width,
+        height,
+        valueColor,
+        titleColor,
+        backgroundColor,
+        noData,
+    }
+) => {
+    svgContainer.appendChild(
+        generateValueSVG({
+            formattedValue: config.formattedValue,
+            icon: config.icon,
+            subText: config.subText,
+            valueColor,
+            noData,
+            containerWidth: width,
+            containerHeight: height,
+        })
+    )
+
+    const container = document.createElement('div')
+    container.setAttribute(
+        'style',
+        `display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:${backgroundColor};`
+    )
+
+    const titleStyle = `font-size: 12px; color: ${
+        titleColor || '#666'
+    }; padding: 0 8px; text-align: center;`
+
+    const title = document.createElement('span')
+    title.setAttribute('style', titleStyle)
+    if (config.title) {
+        title.appendChild(document.createTextNode(config.title))
+
+        //        container.appendChild(title)
+    }
+
+    if (config.subtitle) {
+        const subtitle = document.createElement('span')
+        subtitle.setAttribute('style', titleStyle + ' margin-top: 4px;')
+
+        subtitle.appendChild(document.createTextNode(config.subtitle))
+
+        //        container.appendChild(subtitle)
+    }
+
+    container.appendChild(svgContainer)
+    /*container.appendChild(
+        generateValueSVG({
+            formattedValue: config.formattedValue,
+            icon: config.icon,
+            subText: config.subText,
+            valueColor,
+            noData,
+            containerWidth: width,
+            containerHeight: height,
+        })
+    )*/
+
+    return container
+}
+
+const getTextAnchorFromTextAlign = (textAlign) => {
+    switch (textAlign) {
+        default:
+        case TEXT_ALIGN_LEFT:
+            return 'start'
+        case TEXT_ALIGN_CENTER:
+            return 'middle'
+        case TEXT_ALIGN_RIGHT:
+            return 'end'
+    }
+}
+
+const getXFromTextAlign = (textAlign) => {
+    switch (textAlign) {
+        default:
+        case TEXT_ALIGN_LEFT:
+            return '1%'
+        case TEXT_ALIGN_CENTER:
+            return '50%'
+        case TEXT_ALIGN_RIGHT:
+            return '99%'
+    }
+}
+
+const generateDVItem = (
+    config,
+    {
+        svgContainer,
+        width,
+        height,
+        valueColor,
+        noData,
+        backgroundColor,
+        titleColor,
+        fontStyle,
+    }
+) => {
+    if (backgroundColor) {
+        svgContainer.setAttribute(
+            'style',
+            `background-color: ${backgroundColor};`
+        )
+
+        const background = document.createElementNS(svgNS, 'rect')
+        background.setAttribute('width', '100%')
+        background.setAttribute('height', '100%')
+        background.setAttribute('fill', backgroundColor)
+        svgContainer.appendChild(background)
+    }
+
+    const svgWrapper = document.createElementNS(svgNS, 'svg')
+
+    const title = document.createElementNS(svgNS, 'text')
+    const titleFontStyle = mergeFontStyleWithDefault(
+        fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE],
+        FONT_STYLE_VISUALIZATION_TITLE
+    )
+    title.setAttribute(
+        'x',
+        getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
+    )
+    title.setAttribute('y', 28)
+    title.setAttribute(
+        'text-anchor',
+        getTextAnchorFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
+    )
+    title.setAttribute(
+        'font-size',
+        `${titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`
+    )
+    title.setAttribute(
+        'font-weight',
+        titleFontStyle[FONT_STYLE_OPTION_BOLD]
+            ? FONT_STYLE_OPTION_BOLD
+            : 'normal'
+    )
+    title.setAttribute(
+        'font-style',
+        titleFontStyle[FONT_STYLE_OPTION_ITALIC]
+            ? FONT_STYLE_OPTION_ITALIC
+            : 'normal'
+    )
+    if (
+        titleColor &&
+        titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] ===
+            defaultFontStyle[FONT_STYLE_VISUALIZATION_TITLE][
+                FONT_STYLE_OPTION_TEXT_COLOR
+            ]
+    ) {
+        title.setAttribute('fill', titleColor)
+    } else {
+        title.setAttribute('fill', titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR])
+    }
+
+    title.setAttribute('data-test', 'visualization-title')
+
+    if (config.title) {
+        title.appendChild(document.createTextNode(config.title))
+
+        svgWrapper.appendChild(title)
+    }
+
+    const subtitleFontStyle = mergeFontStyleWithDefault(
+        fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE],
+        FONT_STYLE_VISUALIZATION_SUBTITLE
+    )
+    const subtitle = document.createElementNS(svgNS, 'text')
+    subtitle.setAttribute(
+        'x',
+        getXFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN])
+    )
+    subtitle.setAttribute('y', 28)
+    subtitle.setAttribute('dy', 22)
+    subtitle.setAttribute(
+        'text-anchor',
+        getTextAnchorFromTextAlign(
+            subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]
+        )
+    )
+    subtitle.setAttribute(
+        'font-size',
+        `${subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`
+    )
+    subtitle.setAttribute(
+        'font-weight',
+        subtitleFontStyle[FONT_STYLE_OPTION_BOLD]
+            ? FONT_STYLE_OPTION_BOLD
+            : 'normal'
+    )
+    subtitle.setAttribute(
+        'font-style',
+        subtitleFontStyle[FONT_STYLE_OPTION_ITALIC]
+            ? FONT_STYLE_OPTION_ITALIC
+            : 'normal'
+    )
+
+    if (
+        titleColor &&
+        subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] ===
+            defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE][
+                FONT_STYLE_OPTION_TEXT_COLOR
+            ]
+    ) {
+        subtitle.setAttribute('fill', titleColor)
+    } else {
+        subtitle.setAttribute(
+            'fill',
+            subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]
+        )
+    }
+
+    subtitle.setAttribute('data-test', 'visualization-subtitle')
+
+    if (config.subtitle) {
+        subtitle.appendChild(document.createTextNode(config.subtitle))
+
+        svgWrapper.appendChild(subtitle)
+    }
+
+    svgContainer.appendChild(svgWrapper)
+
+    svgContainer.appendChild(
+        generateValueSVG({
+            formattedValue: config.formattedValue,
+            icon: config.icon,
+            subText: config.subText,
+            valueColor,
+            noData,
+            containerWidth: width,
+            containerHeight: height,
+        })
+    )
+
+    return svgContainer
+}
+
+const shouldUseContrastColor = (inputColor = '') => {
+    // based on https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+    var color =
+        inputColor.charAt(0) === '#' ? inputColor.substring(1, 7) : inputColor
+    var r = parseInt(color.substring(0, 2), 16) // hexToR
+    var g = parseInt(color.substring(2, 4), 16) // hexToG
+    var b = parseInt(color.substring(4, 6), 16) // hexToB
+    var uicolors = [r / 255, g / 255, b / 255]
+    var c = uicolors.map((col) => {
+        if (col <= 0.03928) {
+            return col / 12.92
+        }
+        return Math.pow((col + 0.055) / 1.055, 2.4)
+    })
+    var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+    return L <= 0.179
+}
+
+export default function (
+    config,
+    parentEl,
+    { dashboard, legendSets, fontStyle, noData, legendOptions }
+) {
+    const legendSet = legendOptions && legendSets[0]
+    const legendColor =
+        legendSet && getColorByValueFromLegendSet(legendSet, config.value)
+    let valueColor, titleColor, backgroundColor
+    if (legendColor) {
+        if (legendOptions.style === LEGEND_DISPLAY_STYLE_FILL) {
+            backgroundColor = legendColor
+            valueColor = titleColor =
+                shouldUseContrastColor(legendColor) && colors.white
+        } else {
+            valueColor = legendColor
+        }
+    }
+
+    parentEl.style.overflow = 'hidden'
+    parentEl.style.display = 'flex'
+    parentEl.style.justifyContent = 'center'
+
+    const parentElBBox = parentEl.getBoundingClientRect()
+    const width = parentElBBox.width
+    const height = parentElBBox.height
+
+    const svgContainer = document.createElementNS(svgNS, 'svg')
+    svgContainer.setAttribute('xmlns', svgNS)
+    svgContainer.setAttribute('viewBox', `0 0 ${width} ${height}`)
+    svgContainer.setAttribute('width', '100%')
+    svgContainer.setAttribute('height', '100%')
+    svgContainer.setAttribute('data-test', 'visualization-container')
+
+    if (dashboard) {
+        parentEl.style.borderRadius = spacers.dp8
+
+        return generateDashboardItem(config, {
+            svgContainer,
+            width,
+            height,
+            valueColor,
+            backgroundColor,
+            noData,
+            ...(legendColor && shouldUseContrastColor(legendColor)
+                ? { titleColor: colors.white }
+                : {}),
+        })
+    } else {
+        parentEl.style.height = `100%`
+
+        return generateDVItem(config, {
+            svgContainer,
+            width,
+            height,
+            valueColor,
+            backgroundColor,
+            titleColor,
+            noData,
+            fontStyle,
+        })
+    }
+}

package/build/es/__demo__/PivotTable.stories.js

@@ -825,14 +825,15 @@ storiesOf('PivotTable', module).add('empty columns (weekly) - shown', (_, _ref35
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('empty columns (weekly) - hidden', (_, _ref36) => {
+storiesOf('PivotTable', module).add('cumulative + empty columns (weekly) - shown', (_, _ref36) => {
   let {
     pivotTableOptions
   } = _ref36;
   const visualization = {
     ...weeklyColumnsVisualization,
     ...pivotTableOptions,
-    hideEmptyColumns: true
+    hideEmptyColumns: false,
+    cumulativeValues: true
   };
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -844,10 +845,49 @@ storiesOf('PivotTable', module).add('empty columns (weekly) - hidden', (_, _ref3
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('empty columns + assigned cats (shown)', (_, _ref37) => {
+storiesOf('PivotTable', module).add('empty columns (weekly) - hidden', (_, _ref37) => {
   let {
     pivotTableOptions
   } = _ref37;
+  const visualization = {
+    ...weeklyColumnsVisualization,
+    ...pivotTableOptions,
+    hideEmptyColumns: true
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(PivotTable, {
+    data: weeklyColumnsData,
+    visualization: visualization
+  }));
+});
+storiesOf('PivotTable', module).add('cumulative + empty columns (weekly) - hidden', (_, _ref38) => {
+  let {
+    pivotTableOptions
+  } = _ref38;
+  const visualization = {
+    ...weeklyColumnsVisualization,
+    ...pivotTableOptions,
+    hideEmptyColumns: true,
+    cumulativeValues: true
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(PivotTable, {
+    data: weeklyColumnsData,
+    visualization: visualization
+  }));
+});
+storiesOf('PivotTable', module).add('empty columns + assigned cats (shown)', (_, _ref39) => {
+  let {
+    pivotTableOptions
+  } = _ref39;
   const visualization = {
     ...emptyColumnsVisualization,
     ...visualizationReset,
@@ -864,10 +904,10 @@ storiesOf('PivotTable', module).add('empty columns + assigned cats (shown)', (_,
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('empty columns + assigned cats (hidden)', (_, _ref38) => {
+storiesOf('PivotTable', module).add('empty columns + assigned cats (hidden)', (_, _ref40) => {
   let {
     pivotTableOptions
-  } = _ref38;
+  } = _ref40;
   const visualization = {
     ...emptyColumnsVisualization,
     ...visualizationReset,
@@ -884,10 +924,10 @@ storiesOf('PivotTable', module).add('empty columns + assigned cats (hidden)', (_
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('legend - fixed (light fill)', (_, _ref39) => {
+storiesOf('PivotTable', module).add('legend - fixed (light fill)', (_, _ref41) => {
   let {
     pivotTableOptions
-  } = _ref39;
+  } = _ref41;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -912,10 +952,10 @@ storiesOf('PivotTable', module).add('legend - fixed (light fill)', (_, _ref39) =
     legendSets: [underAbove100LegendSet]
   }));
 });
-storiesOf('PivotTable', module).add('legend - fixed (dark fill)', (_, _ref40) => {
+storiesOf('PivotTable', module).add('legend - fixed (dark fill)', (_, _ref42) => {
   let {
     pivotTableOptions
-  } = _ref40;
+  } = _ref42;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -941,10 +981,10 @@ storiesOf('PivotTable', module).add('legend - fixed (dark fill)', (_, _ref40) =>
     legendSets: [legendSet]
   }));
 });
-storiesOf('PivotTable', module).add('legend - fixed (text)', (_, _ref41) => {
+storiesOf('PivotTable', module).add('legend - fixed (text)', (_, _ref43) => {
   let {
     pivotTableOptions
-  } = _ref41;
+  } = _ref43;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -965,10 +1005,10 @@ storiesOf('PivotTable', module).add('legend - fixed (text)', (_, _ref41) => {
     legendSets: [underAbove100LegendSet]
   }));
 });
-storiesOf('PivotTable', module).add('legend - fixed (% row)', (_, _ref42) => {
+storiesOf('PivotTable', module).add('legend - fixed (% row)', (_, _ref44) => {
   let {
     pivotTableOptions
-  } = _ref42;
+  } = _ref44;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -992,10 +1032,10 @@ storiesOf('PivotTable', module).add('legend - fixed (% row)', (_, _ref42) => {
     legendSets: [underAbove100LegendSet]
   }));
 });
-storiesOf('PivotTable', module).add('legend - by data item', (_, _ref43) => {
+storiesOf('PivotTable', module).add('legend - by data item', (_, _ref45) => {
   let {
     pivotTableOptions
-  } = _ref43;
+  } = _ref45;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1023,10 +1063,10 @@ storiesOf('PivotTable', module).add('legend - by data item', (_, _ref43) => {
     legendSets: [underAbove100LegendSet, customLegendSet]
   }));
 });
-storiesOf('PivotTable', module).add('hierarchy - none', (_, _ref44) => {
+storiesOf('PivotTable', module).add('hierarchy - none', (_, _ref46) => {
   let {
     pivotTableOptions
-  } = _ref44;
+  } = _ref46;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1047,10 +1087,10 @@ storiesOf('PivotTable', module).add('hierarchy - none', (_, _ref44) => {
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('hierarchy - rows', (_, _ref45) => {
+storiesOf('PivotTable', module).add('hierarchy - rows', (_, _ref47) => {
   let {
     pivotTableOptions
-  } = _ref45;
+  } = _ref47;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1070,10 +1110,10 @@ storiesOf('PivotTable', module).add('hierarchy - rows', (_, _ref45) => {
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('hierarchy - columns', (_, _ref46) => {
+storiesOf('PivotTable', module).add('hierarchy - columns', (_, _ref48) => {
   let {
     pivotTableOptions
-  } = _ref46;
+  } = _ref48;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1095,10 +1135,10 @@ storiesOf('PivotTable', module).add('hierarchy - columns', (_, _ref46) => {
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('narrative', (_, _ref47) => {
+storiesOf('PivotTable', module).add('narrative', (_, _ref49) => {
   let {
     pivotTableOptions
-  } = _ref47;
+  } = _ref49;
   const visualization = {
     ...narrativeVisualization,
     ...visualizationReset,
@@ -1116,10 +1156,10 @@ storiesOf('PivotTable', module).add('narrative', (_, _ref47) => {
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('narrative - data as filter', (_, _ref48) => {
+storiesOf('PivotTable', module).add('narrative - data as filter', (_, _ref50) => {
   let {
     pivotTableOptions
-  } = _ref48;
+  } = _ref50;
   const visualization = {
     ...narrativeVisualization,
     ...visualizationReset,
@@ -1143,10 +1183,10 @@ storiesOf('PivotTable', module).add('narrative - data as filter', (_, _ref48) =>
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('DEGS', (_, _ref49) => {
+storiesOf('PivotTable', module).add('DEGS', (_, _ref51) => {
   let {
     pivotTableOptions
-  } = _ref49;
+  } = _ref51;
   const visualization = {
     ...degsVisualization,
     ...visualizationReset,
@@ -1162,10 +1202,10 @@ storiesOf('PivotTable', module).add('DEGS', (_, _ref49) => {
     visualization: visualization
   }));
 });
-storiesOf('PivotTable', module).add('Truncated header cell', (_, _ref50) => {
+storiesOf('PivotTable', module).add('Truncated header cell', (_, _ref52) => {
   let {
     pivotTableOptions
-  } = _ref50;
+  } = _ref52;
   const widths = [250, 200, 500];
   const [width, setWidth] = useState(250);
   const toggleWidth = () => setWidth(currentWidth => {