Skip to content

Commit

Permalink
v4.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@novykh
novykh committed Apr 16, 2024
1 parent c35fe72 commit 08bf35a
Show file tree
Hide file tree
Showing 12 changed files with 790 additions and 717 deletions.
32 changes: 16 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@netdata/charts",
"version": "4.5.0",
"version": "4.6.0",
"description": "Netdata frontend SDK and chart utilities",
"main": "dist/index.js",
"module": "dist/es6/index.js",
Expand Down Expand Up @@ -41,22 +41,22 @@
},
"devDependencies": {
"@babel/cli": "^7.24.1",
"@babel/core": "^7.24.1",
"@babel/core": "^7.24.4",
"@babel/eslint-parser": "^7.24.1",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-transform-modules-umd": "^7.24.1",
"@babel/plugin-transform-runtime": "^7.24.1",
"@babel/preset-env": "^7.24.1",
"@babel/plugin-transform-runtime": "^7.24.3",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@netdata/netdata-ui": "^4.3.20",
"@storybook/addon-essentials": "^8.0.2",
"@storybook/addon-interactions": "^8.0.2",
"@storybook/addon-links": "^8.0.2",
"@storybook/addon-onboarding": "^8.0.2",
"@netdata/netdata-ui": "^4.4.1",
"@storybook/addon-essentials": "^8.0.8",
"@storybook/addon-interactions": "^8.0.8",
"@storybook/addon-links": "^8.0.8",
"@storybook/addon-onboarding": "^8.0.8",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/blocks": "^8.0.2",
"@storybook/react": "^8.0.2",
"@storybook/react-webpack5": "^8.0.2",
"@storybook/blocks": "^8.0.8",
"@storybook/react": "^8.0.8",
"@storybook/react-webpack5": "^8.0.8",
"babel-loader": "^9.1.3",
"babel-plugin-module-resolver": "^5.0.0",
"babel-plugin-styled-components": "^2.1.4",
Expand All @@ -72,17 +72,17 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^5.0.5",
"sass-loader": "^14.1.1",
"storybook": "^8.0.2",
"sass-loader": "^14.2.0",
"storybook": "^8.0.8",
"styled-components": "^5.3.9",
"svg-sprite-loader": "^6.0.11",
"svgo-loader": "^4.0.0",
"webpack": "^5.90.3",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-plugin": "^1.0.5"
},
"dependencies": {
"@storybook/test": "^8.0.2",
"@storybook/test": "^8.0.8",
"babel-eslint": "^10.1.0",
"d3": "^7.9.0",
"d3-scale": "^4.0.2",
Expand Down
13 changes: 9 additions & 4 deletions src/agentv2.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
chartLibrary: "table",
groupBy: ["label", "dimension", "context", "node"],
groupByLabel: ["device"],
en: {
"disk.io": {
one: "DISK IO",
},
},
},
})

Expand Down Expand Up @@ -179,7 +184,7 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD

return (
<Flex background="mainBackground" column gap={2} padding={[3]} overflow="auto" height="100%">
<Flex height={50} width="100%" gap={2}>
{/*<Flex height={50} width="100%" gap={2}>
<EasyPieComponent chart={chart2} height="100px" width="100px" />
<GaugeComponent chart={chart3} height="100px" width="100px" />
<NumberComponent chart={chart5} height="100px" width="100px" />
Expand All @@ -189,10 +194,10 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
<D3pieComponent chart={chart8} height="100px" width="100px" />
<D3pieComponent chart={chart9} height="100px" width="100px" />
<BarsComponent chart={chart10} height="100px" width="100px" />
</Flex>
<Line chart={chart} height="315px" width="100%" />
</Flex>*/}
{/*<Line chart={chart} height="315px" width="100%" />*/}
<Table chart={chart7} height="315px" width="100%" />
<GroupBoxes chart={chart4} />
{/*<GroupBoxes chart={chart4} />*/}
</Flex>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/line/dimensions/name.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { memo, forwardRef } from "react"
import { TextMicro } from "@netdata/netdata-ui"
import { TextSmall } from "@netdata/netdata-ui"
import { useChart } from "@/components/provider"
import Shortener from "@/components/helpers/shortener"

export const Name = memo(
forwardRef(({ children, ...rest }, ref) => (
<Shortener
text={children}
Component={TextMicro}
Component={TextSmall}
color="textDescription"
whiteSpace="nowrap"
ref={ref}
Expand Down
4 changes: 2 additions & 2 deletions src/components/line/dimensions/value.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { forwardRef } from "react"
import { TextMicro } from "@netdata/netdata-ui"
import { TextSmall } from "@netdata/netdata-ui"
import { useConvertedValue } from "@/components/provider"

export const Value = forwardRef((props, ref) => (
<TextMicro color="textDescription" data-testid="chartDimensions-value" {...props} ref={ref} />
<TextSmall color="textDescription" data-testid="chartDimensions-value" {...props} ref={ref} />
))

const ValueComponent = forwardRef(
Expand Down
137 changes: 11 additions & 126 deletions src/components/table/columns.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react"
import { Flex, TextSmall, TextMicro } from "@netdata/netdata-ui"
import { Flex, TextSmall } from "@netdata/netdata-ui"
import styled from "styled-components"
import Color, { ColorBar } from "@/components/line/dimensions/color"
import Name from "@/components/line/dimensions/name"
Expand Down Expand Up @@ -41,8 +41,6 @@ const emptyArray = []
export const labelColumn = (chart, { fallbackExpandKey, partIndex, header = "Name" } = {}) => ({
id: `label${header || ""}${partIndex || ""}`,
header: () => <TextSmall strong>{header}</TextSmall>,
size: 100,
minSize: 45,
sortingFn: (rowA, rowB) => {
return (chart.getDimensionName(rowA.original.ids?.[0], partIndex) || "").localeCompare(
chart.getDimensionName((rowB.original.ids?.[0], partIndex) || ""),
Expand All @@ -53,6 +51,9 @@ export const labelColumn = (chart, { fallbackExpandKey, partIndex, header = "Nam
}
)
},
fullWidth: true,
size: 50,
minSize: 30,
cell: ({
row: {
original: { ids },
Expand Down Expand Up @@ -132,13 +133,12 @@ export const valueColumn = (chart, { context = "Dimensions", dimension = "Value"
id: `value${context}${dimension}`,
header: () => {
return (
<TextMicro>
{dimension} <Units visible />
</TextMicro>
<Flex column>
<TextSmall>{dimension}</TextSmall>
<Units visible />
</Flex>
)
},
size: 80,
minSize: 45,
sortingFn: (rowA, rowB) => {
return compareBasic(
getValueByPeriod.latest({
Expand All @@ -155,6 +155,9 @@ export const valueColumn = (chart, { context = "Dimensions", dimension = "Value"
})
)
},
fullWidth: true,
size: 50,
minSize: 30,
cell: ({
row: {
original: { key, ids, contextGroups },
Expand All @@ -180,122 +183,4 @@ export const valueColumn = (chart, { context = "Dimensions", dimension = "Value"
/>
)
},
sortingFn: "basic",
})

// export const anomalyColumn = ({ period, objKey }) => ({
// id: objKey ? `${objKey}-arp` : "arp",
// header: <TextMicro>AR %</TextMicro>,
// size: 45,
// minSize: 45,
// cell: ({
// row: { original: id, depth = 0, getCanExpand, getToggleExpandedHandler, getIsExpanded },
// }) => {
// const visible = useVisibleDimensionId(id)

// return (
// <Value
// period={period}
// objKey={objKey}
// textAlign="right"
// id={id}
// visible={visible}
// valueKey="arp"
// Component={ValueOnDot}
// fractionDigits={2}
// color="anomalyTextFocus"
// />
// )
// },
// sortingFn: "basic",
// })

// export const minColumn = ({ period, objKey }) => ({
// id: objKey ? `${objKey}-min` : "min",
// header: (
// <TextMicro>
// Min <Units visible />
// </TextMicro>
// ),
// size: 45,
// minSize: 45,
// cell: ({
// row: { original: id, depth = 0, getCanExpand, getToggleExpandedHandler, getIsExpanded },
// }) => {
// const visible = useVisibleDimensionId(id)

// return (
// <Value
// period={period}
// objKey={objKey}
// textAlign="right"
// id={id}
// visible={visible}
// valueKey="min"
// Component={ValueOnDot}
// fractionDigits={2}
// />
// )
// },
// sortingFn: "basic",
// })

// export const avgColumn = ({ period, objKey }) => ({
// id: objKey ? `${objKey}-avg` : "avg",
// header: (
// <TextMicro>
// Avg <Units visible />
// </TextMicro>
// ),
// size: 45,
// minSize: 45,
// cell: ({
// row: { original: id, depth = 0, getCanExpand, getToggleExpandedHandler, getIsExpanded },
// }) => {
// const visible = useVisibleDimensionId(id)

// return (
// <Value
// period={period}
// objKey={objKey}
// textAlign="right"
// id={id}
// visible={visible}
// valueKey="avg"
// Component={ValueOnDot}
// fractionDigits={2}
// />
// )
// },
// sortingFn: "basic",
// })

// export const maxColumn = ({ period, objKey }) => ({
// id: objKey ? `${objKey}-max` : "max",
// header: (
// <TextMicro>
// Max <Units visible />
// </TextMicro>
// ),
// size: 45,
// minSize: 45,
// cell: ({
// row: { original: id, depth = 0, getCanExpand, getToggleExpandedHandler, getIsExpanded },
// }) => {
// const visible = useVisibleDimensionId(id)

// return (
// <Value
// period={period}
// objKey={objKey}
// textAlign="right"
// id={id}
// visible={visible}
// valueKey="max"
// Component={ValueOnDot}
// fractionDigits={2}
// />
// )
// },
// sortingFn: "basic",
// })
25 changes: 16 additions & 9 deletions src/components/table/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React, { forwardRef, useMemo } from "react"
import groupBy from "lodash/groupBy"
import isEmpty from "lodash/isEmpty"
import { Table, TextSmall } from "@netdata/netdata-ui"
import { Table } from "@netdata/netdata-ui"
import ChartContainer from "@/components/chartContainer"
import { useChart, useDimensionIds, useAttributeValue } from "@/components/provider"
import withChart from "@/components/hocs/withChart"
import { ChartWrapper } from "@/components/hocs/withTile"
import { uppercase } from "@/helpers/objectTransform"
import FontSizer from "@/components/helpers/fontSizer"
import { labelColumn, valueColumn, anomalyColumn, minColumn, avgColumn, maxColumn } from "./columns"
import { labelColumn, valueColumn } from "./columns"

const keepoutRegex = ".*"
const keepRegex = "(" + keepoutRegex + ")"

const useColumns = (chart, options = {}) => {
const { period, dimensionIds, groups, labels, rowGroups, contextGroups } = options
const { period, dimensionIds, groups, labels, contextGroups } = options

const hover = useAttributeValue("hoverX")
const tableColumns = chart.getAttribute("tableColumns")

return useMemo(() => {
return [
Expand All @@ -29,23 +29,27 @@ const useColumns = (chart, options = {}) => {
partIndex: groups.findIndex(gi => gi === label),
})
),
notFlex: true,
fullWidth: true,
enableResizing: true,
},
...Object.keys(contextGroups).map(context => {
return {
id: `Context-${context}`,
header: () => context,
header: () => chart.intl(context),
columns: Object.keys(contextGroups[context]).map(dimension =>
valueColumn(chart, { context, dimension, ...options })
),
notFlex: true,
fullWidth: true,
enableResizing: true,
}
}),
]
}, [period, !!hover, dimensionIds])
}

const columnAttrs = ["context", "dimension"]

const groupByColumn = (result, ids, groups, attrs = columnAttrs) => {
const groupByColumn = (result, ids, groups, attrs) => {
const [attr, ...restAttrs] = attrs
const groupByRegex = new RegExp(
groups.reduce((s, g) => {
Expand Down Expand Up @@ -129,9 +133,12 @@ const Dimensions = () => {
return (
<Table
enableSorting
// enableSelection
enableColumnVisibility
dataColumns={columns}
data={Object.keys(rowGroups).map(g => ({ key: g, ids: rowGroups[g], contextGroups }))}
globalFilterFn={(...args) => {
debugger
}}
// onRowSelected={onItemClick}
// onSearch={noop}
// meta={meta}
Expand Down
2 changes: 2 additions & 0 deletions src/sdk/initialAttributes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,8 @@ export default {
},
},

tableColumns: ["context", "dimension"],

bearer: null,
xNetdataBearer: null,

Expand Down
Loading

0 comments on commit 08bf35a

Please sign in to comment.