@cdc/chart 4.23.3 → 4.23.5

package/src/hooks/useScales.js

@@ -0,0 +1,202 @@
+import { scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+
+const useScales = properties => {
+  let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
+  const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const xAxisType = config.runtime.xAxis.type
+  const isHorizontal = config.orientation === 'horizontal'
+
+  //  define scxales
+  let xScale = null
+  let yScale = null
+  let g2xScale = null
+  let g1xScale = null
+  let seriesScale = null
+
+  const scaleTypes = {
+    TIME: 'time',
+    LOG: 'log',
+    POINT: 'point',
+    LINEAR: 'linear',
+    BAND: 'band'
+  }
+
+  // handle  Horizontal bars
+  if (isHorizontal) {
+    xScale = composeXScale({ min: min * 1.03, ...properties })
+    xScale.type = config.useLogScale ? scaleTypes.LOG : scaleTypes.LINEAR
+    yScale = getYScaleFunction(xAxisType, xAxisDataMapped)
+    yScale.rangeRound([0, yMax])
+    seriesScale = composeScalePoint(seriesDomain, [0, yMax])
+  }
+
+  // handle  Vertical bars
+  if (!isHorizontal) {
+    xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
+    xScale.type = scaleTypes.POINT
+
+    // if (config.visualizationType === 'Bar') {
+    //   xScale = scaleBand({
+    //     domain: xAxisDataMapped,
+    //     range: [0, xMax],
+    //     padding: 0.4
+    //   })
+    //   xScale.type = scaleTypes.BAND
+    // }
+    yScale = composeYScale(properties)
+    seriesScale = composeScalePoint(seriesDomain, [0, xMax])
+  }
+
+  // handle Area chart
+  if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
+    xScale = scaleTime({
+      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+      range: [0, xMax]
+    })
+    xScale.type = scaleTypes.TIME
+  }
+
+  // handle Deviation bar
+  if (config.visualizationType === 'Deviation Bar') {
+    const leftOffset = config.isLollipopChart ? 1.05 : 1.03
+    yScale = scaleBand({
+      domain: xAxisDataMapped,
+      range: [0, yMax]
+    })
+    xScale = scaleLinear({
+      domain: [min * leftOffset, Math.max(Number(config.xAxis.target), max)],
+      range: [0, xMax],
+      round: true,
+      nice: true
+    })
+    xScale.type = scaleTypes.LINEAR
+  }
+
+  // handle Scatter plot
+  if (config.visualizationType === 'Scatter Plot') {
+    if (config.xAxis.type === 'continuous') {
+      xScale = scaleLinear({
+        domain: [0, Math.max.apply(null, xScale.domain())],
+        range: [0, xMax]
+      })
+      xScale.type = scaleTypes.LINEAR
+    }
+  }
+
+  // handle Box plot
+  if (config.visualizationType === 'Box Plot') {
+    const allOutliers = []
+    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
+
+    // check if outliers are lower
+    if (hasOutliers) {
+      let outlierMin = Math.min(...allOutliers)
+      let outlierMax = Math.max(...allOutliers)
+
+      // check if outliers exceed standard bounds
+      if (outlierMin < min) min = outlierMin
+      if (outlierMax > max) max = outlierMax
+    }
+
+    // check fences for max/min
+    let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnLowerBounds))
+    let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnUpperBounds))
+
+    if (lowestFence < min) min = lowestFence
+    if (highestFence > max) max = highestFence
+
+    // Set Scales
+    yScale = scaleLinear({
+      range: [yMax, 0],
+      round: true,
+      domain: [min, max]
+    })
+
+    xScale = scaleBand({
+      range: [0, xMax],
+      round: true,
+      domain: config.boxplot.categories,
+      padding: 0.4
+    })
+    xScale.type = scaleTypes.BAND
+  }
+
+  // handle Paired bar
+  if (config.visualizationType === 'Paired Bar') {
+    const offset = 1.02 // Offset of the ticks/values from the Axis
+    let groupOneMax = Math.max.apply(
+      Math,
+      data.map(d => d[config.series[0].dataKey])
+    )
+    let groupTwoMax = Math.max.apply(
+      Math,
+      data.map(d => d[config.series[1].dataKey])
+    )
+
+    // group one
+    g1xScale = scaleLinear({
+      domain: [0, Math.max(groupOneMax, groupTwoMax) * offset],
+      range: [xMax / 2, 0]
+    })
+
+    // group 2
+    g2xScale = scaleLinear({
+      domain: g1xScale.domain(),
+      range: [xMax / 2, xMax],
+      nice: true
+    })
+  }
+
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale }
+}
+
+export default useScales
+
+/// helper functions
+const composeXScale = ({ min, max, xMax, config }) => {
+  // Adjust min value if using logarithmic scale
+  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  // Select the appropriate scale function
+  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  // Return the configured scale function
+  return scaleFunc({
+    domain: [min, max],
+    range: [0, xMax],
+    nice: config.useLogScale,
+    zero: config.useLogScale,
+    type: config.useLogScale ? 'log' : 'linear'
+  })
+}
+
+const composeYScale = ({ min, max, yMax, config }) => {
+  // Adjust min value if using logarithmic scale
+  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  // Select the appropriate scale function
+  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  // Return the configured scale function
+  return scaleFunc({
+    domain: [min, max],
+    range: [yMax, 0],
+    nice: config.useLogScale,
+    zero: config.useLogScale
+  })
+}
+
+const getYScaleFunction = (xAxisType, xAxisDataMapped) => {
+  if (xAxisType === 'date') {
+    return scaleLinear({
+      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]
+    })
+  } else {
+    return scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+  }
+}
+
+const composeScalePoint = (domain, range, padding = 0) => {
+  return scalePoint({
+    domain: domain,
+    range: range,
+    padding: padding,
+    type: 'point'
+  })
+}

package/src/index.jsx

@@ -6,11 +6,12 @@ import CdcChart from './CdcChart'
 import 'react-tooltip/dist/react-tooltip.css'
 
 let isEditor = window.location.href.includes('editor=true')
+let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
   </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -75,11 +75,16 @@
       align-items: center;
       justify-content: space-between;
       font-size: 0.9em;
+      position: relative;
 
       &:hover {
         background-color: $lightestGray;
       }
 
+      div {
+        width: 100%;
+      }
+
       .series-list__name {
         position: relative;
         user-select: none;
@@ -132,7 +137,13 @@
       }
 
       .series-list__dropdown {
+        width: 100%;
+        display: block;
         font-size: 0.8em;
+        margin-bottom: 10px;
+        select {
+          width: 100%;
+        }
       }
 
       .series-list__remove {
@@ -140,6 +151,9 @@
         font-size: 1.125rem;
         color: #f00;
         cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 5px;
       }
 
       + li {
@@ -150,6 +164,7 @@
 
   .series-list__name-text {
     max-width: 150px;
+    margin-bottom: 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

package/src/scss/main.scss

@@ -231,9 +231,13 @@
     }
   }
 
+  .visx-tooltip {
+    z-index: 100000;
+  }
+
   .tooltip {
-    border: rgba(0,0,0,.3) 1px solid;
-    box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
+    border: rgba(0, 0, 0, 0.3) 1px solid;
+    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 7px;
     opacity: 1;
     line-height: 1.4em;
     font-size: 1em;
@@ -242,8 +246,8 @@
     z-index: 1;
 
     .react-tooltip-arrow {
-      border-bottom: rgba(0,0,0,.3) 1px solid;
-      border-right: rgba(0,0,0,.3) 1px solid;
+      border-bottom: rgba(0, 0, 0, 0.3) 1px solid;
+      border-right: rgba(0, 0, 0, 0.3) 1px solid;
       backface-visibility: hidden;
     }
   }
@@ -337,8 +341,6 @@
     }
 
     &__wrapper {
-      margin-bottom: 40px;
-
       hr {
         margin-bottom: 20px;
       }

package/examples/box-plot.csv

@@ -1,5 +0,0 @@
-x,min,firstQuartile,median,thirdQuartile,max,outliers
-Group 1,-3.529439249291613,2.498913996933074,6,6.517816161082865,12.546169407307552,-4.222649440089676,-3.7995254226812145,12.669680018702707,,,,,,,,,,,,
-Group 2,-2.961278855962981,3.1553763355078277,5.31642875968012,7.233146463155033,13.349801654625843,-4.5962772985737645,14.42798091207488,14.832072412460995,,,,,,,,,,,,
-Group 3,-0.784362943544294,5.600233888319485,7.606034555385235,9.85663177622867,16.24122860809245,-2.0568265981730285,-2.036299998010181,-1.634595257757523,-0.9751707921193091,-0.9256799494292718,-0.813852054679872,16.255225428689318,19.221712546396496,,,,,,,
-Group 4,-3.4976011611041598,2.362493132101971,4.364242960871863,6.269222660906058,12.129316954112188,-5.912277243480174,-4.535668956980487,-4.255719319016919,-4.175200716132927,-4.1021204775116455,-3.7913796362224352,-3.6909919981778567,-3.6261129831962697,12.169135739844744,12.1724073804239,12.191268834215071,12.236896118210165,12.34513716605812,12.826785108558722,13.048968511771164

package/examples/dynamic-legends.json

@@ -1,125 +0,0 @@
-{
-  "type": "chart",
-  "title": "Example Line Chart",
-  "theme": "theme-green",
-  "fontSize": "medium",
-  "height": "375",
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
-  "yAxis": {
-    "size": "75",
-    "gridLines": false,
-    "label": "Y-Axis Example Label",
-    "numTicks": "9"
-  },
-  "barThickness": 0.35,
-  "xAxis": {
-    "size": "77",
-    "tickRotation": "25",
-    "dataKey": "Date",
-    "label": "X-Axis Example Label",
-    "type": "date",
-    "dateParseFormat": "%d/%m/%Y",
-    "dateDisplayFormat": "%d/%m/%Y"
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": true,
-    "download": true
-  },
-  "legend": {
-    "behavior": "isolate",
-    "position": "right",
-    "label": "Type of Data",
-    "dynamicLegend": false
-  },
-  "palette": "qualitative-bold",
-  "labels": false,
-  "dataFormat": {},
-  "confidenceKeys": {},
-  "data": [
-    {
-      "Date": "1/15/2016",
-      "Alabama": "90",
-      "Alaska": "135",
-      "Arizona": "300",
-      "Arkansas": "95",
-      "California": "120",
-      "Colorado": "310"
-    },
-    {
-      "Date": "2/15/2016",
-      "Alabama": "40",
-      "Alaska": "90",
-      "Arizona": "240",
-      "Arkansas": "60",
-      "California": "160",
-      "Colorado": "200"
-    },
-    {
-      "Date": "3/15/2016",
-      "Alabama": "50",
-      "Alaska": "300",
-      "Arizona": "290",
-      "Arkansas": "100",
-      "California": "200",
-      "Colorado": "250"
-    },
-    {
-      "Date": "4/15/2016",
-      "Alabama": "120",
-      "Alaska": "160",
-      "Arizona": "230",
-      "Arkansas": "180",
-      "California": "160",
-      "Colorado": "220"
-    },
-    {
-      "Date": "5/15/2016",
-      "Alabama": "80",
-      "Alaska": "350",
-      "Arizona": "300",
-      "Arkansas": "150",
-      "California": "130",
-      "Colorado": "100"
-    },
-    {
-      "Date": "6/15/2016",
-      "Alabama": "90",
-      "Alaska": "220",
-      "Arizona": "320",
-      "Arkansas": "100",
-      "California": "220",
-      "Colorado": "300"
-    }
-  ],
-  "visualizationType": "Line",
-  "series": [
-    {
-      "dataKey": "Alabama",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Alaska",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Arizona",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Arkansas",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "California",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Colorado",
-      "type": "Bar"
-    }
-  ]
-}

package/examples/example-bar-chart.json

@@ -1,36 +0,0 @@
-{
-  "type": "chart",
-  "title": "Example Bar Chart",
-  "theme": "theme-blue",
-  "fontSize": "medium",
-  "height": 300,
-  "padding": { "left": 5, "right": 5 },
-  "yAxis": { "size": "76", "gridLines": false, "label": "Y Axis Example Label" },
-  "barThickness": "0.6",
-  "xAxis": { "size": "59", "tickRotation": 0, "dataKey": "Date", "label": "X Axis Example Label" },
-  "table": { "label": "Data Type by Date", "expanded": true },
-  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
-  "palette": "qualitative-bold",
-  "labels": false,
-  "dataFormat": { "suffix": " units" },
-  "confidenceKeys": {},
-  "data": [
-    { "Date": "1/15/2016", "Data 1": "90", "Data 2": "135", "Data 3": "300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
-    { "Date": "2/15/2016", "Data 1": "40", "Data 2": "90", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
-    { "Date": "3/15/2016", "Data 1": "50", "Data 2": "300", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
-    { "Date": "4/15/2016", "Data 1": "120", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
-    { "Date": "5/15/2016", "Data 1": "80", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" },
-    { "Date": "6/15/2016", "Data 1": "90", "Data 2": "220", "Data 3": "320", "Data 4": "100", "Data 5": "220", "Data 6": "300" }
-  ],
-  "visualizationType": "Bar",
-  "series": [
-    { "dataKey": "Data 1", "type": "Bar" },
-    { "dataKey": "Data 2", "type": "Bar" },
-    { "dataKey": "Data 3", "type": "Bar" },
-    { "dataKey": "Data 4", "type": "Bar" },
-    { "dataKey": "Data 5", "type": "Bar" },
-    { "dataKey": "Data 6", "type": "Bar" }
-  ],
-  "description": "This example shows a bar chart created in the visualization editor in WCMS",
-  "dataCutoff": "0"
-}

package/examples/line-chart.json

@@ -1,34 +0,0 @@
-{
-  "type": "chart",
-  "title": "Example Line Chart",
-  "theme": "theme-green",
-  "fontSize": "medium",
-  "height": "375",
-  "padding": { "left": 5, "right": 5 },
-  "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
-  "barThickness": 0.35,
-  "xAxis": { "size": "77", "tickRotation": "25", "dataKey": "Date", "label": "X-Axis Example Label", "type": "date", "dateParseFormat": "%d/%m/%Y", "dateDisplayFormat": "%d/%m/%Y" },
-  "table": { "label": "Data Table", "expanded": true, "download": true },
-  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
-  "palette": "qualitative-bold",
-  "labels": false,
-  "dataFormat": {},
-  "confidenceKeys": {},
-  "data": [
-    { "Date": "1/15/2016", "Data 1": "90", "Data 2": "135", "Data 3": "300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
-    { "Date": "2/15/2016", "Data 1": "40", "Data 2": "90", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
-    { "Date": "3/15/2016", "Data 1": "50", "Data 2": "300", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
-    { "Date": "4/15/2016", "Data 1": "120", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
-    { "Date": "5/15/2016", "Data 1": "80", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" },
-    { "Date": "6/15/2016", "Data 1": "90", "Data 2": "220", "Data 3": "320", "Data 4": "100", "Data 5": "220", "Data 6": "300" }
-  ],
-  "visualizationType": "Line",
-  "series": [
-    { "dataKey": "Data 1", "type": "Line" },
-    { "dataKey": "Data 2", "type": "Line" },
-    { "dataKey": "Data 3", "type": "Line" },
-    { "dataKey": "Data 4", "type": "Line" },
-    { "dataKey": "Data 5", "type": "Line" },
-    { "dataKey": "Data 6", "type": "Line" }
-  ]
-}

package/examples/temp-example-config.json

@@ -1,64 +0,0 @@
-{
-  "title": "Average Temperature By City (Line Example)",
-  "description": "<p>Average temperature from October 1st through August 29th in:</p><ul><li>New York</li><li>San Francisco</li><li>Austin</li></ul>",
-  "dataUrl": "/examples/temp-example-data.json",
-  "visualizationType": "Line",
-  "series": [
-    { "dataKey": "New York", "label": "NY" },
-    { "dataKey": "San Francisco", "label": "SF" },
-    { "dataKey": "Austin", "label": "AU" }
-  ],
-  "filters": [
-    {
-      "label": "Wind",
-      "columnName": "wind"
-    },
-    {
-      "label": "Humidity",
-      "columnName": "humidity"
-    }
-  ],
-  "seriesLabel": "City",
-  "fontSize": "large",
-  "dataFormat": {
-    "commas": false,
-    "prefix": "",
-    "suffix": "°"
-  },
-  "padding": {
-    "left": 15,
-    "right": 15
-  },
-  "yAxis": {
-    "label": "Temperature",
-    "paddingPercent": 0.15
-  },
-  "xAxis": {
-    "label": "Date",
-    "dataKey": "date",
-    "type": "date",
-    "dateParseFormat": "%Y-%m-%d",
-    "dateDisplayFormat": "%b %d",
-    "numTicks": 8,
-    "tickRotation": 50
-  },
-  "legend": {
-    "label": "Legend",
-    "above": true,
-    "left": true
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": false,
-    "download": true
-  },
-  "regions": [
-    {
-      "label": "Region",
-      "color": "black",
-      "background": "green",
-      "from": "2011-10-02",
-      "to": "2011-10-03"
-    }
-  ]
-}