Units (#178)

* Introduce UCUM. * v3.4.0 * Upgrade ui. * v3.4.1 * Add uuid. * v3.5.0 * Rollback styled components. * v3.5.1 * v3.5.2 * v3.5.3 * v3.5.4 * Upgrade packages. * v3.5.5
netdata · Aug 14, 2023 · 5a5bccf · 5a5bccf
1 parent a8d7260
commit 5a5bccf
Show file tree

Hide file tree

Showing 12 changed files with 4,184 additions and 4,159 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "3.3.5",
+  "version": "3.5.5",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "index.js",
   "module": "es6/index.js",
@@ -21,7 +21,7 @@
     "lint": "eslint './src/**/*.js'",
     "clean": "rimraf lib dist es coverage",
     "prepublishOnly": "yarn clean && yarn build",
-    "start": "start-storybook -p 6006",
+    "start": "yarn storybook dev",
     "deploy-storybook": "storybook-to-ghpages",
     "cp-cloud": "cp -R ./dist ../cloud-frontend/node_modules/@netdata/charts/",
     "to-cloud": "yarn build:cjs && yarn cp-cloud"
@@ -37,56 +37,57 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.21.3",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-transform-modules-umd": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@netdata/netdata-ui": "^2.16.5",
-    "@storybook/addon-controls": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@babel/plugin-transform-modules-umd": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@netdata/netdata-ui": "^2.19.9",
+    "@storybook/addon-controls": "^7.2.3",
+    "@storybook/builder-webpack5": "^7.2.3",
     "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.2.3",
     "@storybook/storybook-deployer": "^2.8.16",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-styled-components": "^2.1.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "clean-webpack-plugin": "^4.0.0",
-    "eslint": "^8.39.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.47.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.5.0",
-    "node-sass": "^8.0.0",
-    "prettier": "^2.8.8",
+    "eslint-plugin-storybook": "^0.6.13",
+    "jest": "^29.6.2",
+    "jest-canvas-mock": "^2.5.2",
+    "node-sass": "^9.0.0",
+    "prettier": "^3.0.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
-    "rimraf": "^5.0.0",
-    "sass-loader": "^13.2.2",
-    "storybook": "^6.5.16",
-    "styled-components": "^5.3.10",
+    "rimraf": "^5.0.1",
+    "sass-loader": "^13.3.2",
+    "storybook": "^7.2.3",
+    "styled-components": "^6.0.7",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^4.0.0",
-    "webpack": "^5.80.0",
-    "webpack-cli": "^5.0.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
     "webpack-plugin": "^1.0.5"
   },
   "dependencies": {
     "babel-eslint": "^10.1.0",
-    "d3": "^7.8.4",
+    "d3": "^7.8.5",
     "d3-scale": "^4.0.2",
     "dygraphs": "^2.2.1",
     "easy-pie-chart": "^2.1.7",
     "md5": "^2.3.0",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.0",
+    "uuid": "^9.0.0"
   }
 }
diff --git a/src/chartLibraries/dygraph/index.js b/src/chartLibraries/dygraph/index.js
@@ -324,7 +324,7 @@ export default (sdk, chart) => {
       },
       ylabel:
         chart.getAttribute("hasYlabel") &&
-        chart.getUnitSign({ long: true, real: isHeatmap(chartType) }),
+        chart.getUnitSign({ long: true, withoutConversion: isHeatmap(chartType) }),
     }
   }
 

diff --git a/src/components/filterToolbox/columns.js b/src/components/filterToolbox/columns.js
@@ -55,6 +55,7 @@ export const labelColumn = fallbackExpandKey => ({
             }}
             iconRotate={row.getIsExpanded() ? 2 : null}
             textProps={{ fontSize: "10px", color: "textLite" }}
+            alignItems="center"
           />
         )}
       </Flex>

diff --git a/src/components/groupBoxes/popover/labels.js b/src/components/groupBoxes/popover/labels.js
@@ -14,7 +14,9 @@ const Container = styled(Flex).attrs(props => ({
   padding: [4],
   gap: 1,
 }))`
-  box-shadow: 0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31);
+  box-shadow:
+    0px 8px 12px rgba(9, 30, 66, 0.15),
+    0px 0px 1px rgba(9, 30, 66, 0.31);
 `
 
 const ColorBackground = styled(BaseColorBar).attrs({
@@ -35,7 +37,7 @@ const Grid = styled.div`
 
 const Labels = ({ index, label, groupLabel, data, id }) => {
   const chart = useChart()
-  const viewDimensions = chart.getAttribute("viewDimensions") || {}
+  const viewDimensions = chart.getAttribute("viewDimensions")
 
   const min = useAttributeValue("min")
   const max = useAttributeValue("max")
@@ -63,11 +65,13 @@ const Labels = ({ index, label, groupLabel, data, id }) => {
           </TextMicro>
         </Flex>
       </Flex>
-      <Grid gap={1} column>
-        {Object.keys(viewDimensions.labels).map(key => (
-          <Label key={key} label={key} value={viewDimensions.labels[key]?.[index]} />
-        ))}
-      </Grid>
+      {!!viewDimensions?.labels && (
+        <Grid gap={1} column>
+          {Object.keys(viewDimensions.labels).map(key => (
+            <Label key={key} label={key} value={viewDimensions.labels[key]?.[index]} />
+          ))}
+        </Grid>
+      )}
     </Container>
   )
 }

diff --git a/src/components/line/overlays/latestValue.js b/src/components/line/overlays/latestValue.js
@@ -4,8 +4,11 @@ import { Flex, Text, getColor } from "@netdata/netdata-ui"
 import { useLatestConvertedValue, useUnitSign } from "@/components/provider"
 
 const StrokeLabel = styled(Text)`
-  text-shadow: 0.02em 0 ${getColor("borderSecondary")}, 0 0.02em ${getColor("borderSecondary")},
-    -0.02em 0 ${getColor("borderSecondary")}, 0 -0.02em ${getColor("borderSecondary")};
+  text-shadow:
+    0.02em 0 ${getColor("borderSecondary")},
+    0 0.02em ${getColor("borderSecondary")},
+    -0.02em 0 ${getColor("borderSecondary")},
+    0 -0.02em ${getColor("borderSecondary")};
 `
 
 const StyledFlex = styled(Flex)`
@@ -29,11 +32,11 @@ const LatestValue = ({ dimensionId, textProps, ...rest }) => {
     )
 
   return (
-    <StyledFlex alignItems="baseline" gap={1} {...rest}>
-      <StrokeLabel fontSize="2.5em" strong {...defaultTextProps} {...textProps}>
+    <StyledFlex column {...rest}>
+      <StrokeLabel fontSize="2.1em" lineHeight="1.1em" strong {...defaultTextProps} {...textProps}>
         {value}
       </StrokeLabel>
-      <StrokeLabel fontSize="1.3em" {...defaultTextProps} {...textProps}>
+      <StrokeLabel fontSize="1.1em" strong {...defaultTextProps} color="border" {...textProps}>
         {unit}
       </StrokeLabel>
     </StyledFlex>

diff --git a/src/sdk/makeChart/camelizePayload.js b/src/sdk/makeChart/camelizePayload.js
@@ -1,4 +1,8 @@
 import { heatmapOrChartType } from "@/helpers/heatmap"
+import unitsJson from "@/units.json"
+
+const getAlias = u =>
+  unitsJson.aliases[u] || (unitsJson.units[u] ? u : unitsJson.units[`{${u}}`] ? `{${u}}` : u)
 
 const transformDataRow = (row, point) =>
   row.reduce(
@@ -134,7 +138,7 @@ export default payload => {
     viewUpdateEvery,
     firstEntry,
     lastEntry,
-    units,
+    units: getAlias(units),
     chartType: heatmapOrChartType(viewDimensions.ids, chartType),
     title,
     tiers,
@@ -154,7 +158,7 @@ export default payload => {
     }, {}),
     viewDimensions,
     dbDimensions,
-    dbUnits,
+    dbUnits: getAlias(dbUnits),
     details,
     functions,
     contextsTotals,

diff --git a/src/sdk/makeChart/filters/getAggregateMethod.js b/src/sdk/makeChart/filters/getAggregateMethod.js
@@ -1,39 +1,25 @@
 const averageUnits = new Set([
   "%",
-  "percentage",
-  "percent",
-  "rotations/min",
-  "ratio",
-  "seconds",
-  "seconds ago",
-  "milliseconds",
-  "millisec",
+  "c[CPU]",
+  "{rotation}/min",
+  "1",
+  "s",
   "ms",
-  "log2 s",
-  "minutes",
-  "hours",
-  "interval",
-  "ticks",
-  "celsius",
-  "c",
-  "mhz",
-  "hz",
-  "volts",
-  "kwh",
-  "ampere",
-  "amps",
-  "dbm",
-  "value",
-  "stratum",
-  "units",
-  "watt",
-  "temperature",
-  "random number",
-  "rpm",
-  "quadro",
-  "adv/item",
-  "multiplier",
-  "geforce",
+  "min",
+  "h",
+  "{tick}",
+  "Cel",
+  "Hz",
+  "MHz",
+  "V",
+  "A",
+  "W",
+  "dB[mW]",
+  "1",
+  "{stratum}",
+  "Cel",
+  "[degF]",
+  "{rotation}/min",
 ])
 
 const averageRegex = /(%|\/operation|\/run| run|\/request)/
@@ -44,11 +30,11 @@ export default chart => {
   if (!unit) return "avg"
 
   let lowerUnit = unit.toLowerCase()
-  if (averageUnits.has(lowerUnit) || averageRegex.test(lowerUnit)) return "avg"
+  if (averageUnits.has(unit) || averageRegex.test(lowerUnit)) return "avg"
 
   const unitSign = chart.getUnitSign()
   lowerUnit = unitSign.toLowerCase()
-  if (averageUnits.has(lowerUnit) || averageRegex.test(lowerUnit)) return "avg"
+  if (averageUnits.has(unitSign) || averageRegex.test(lowerUnit)) return "avg"
 
   return "sum"
 }