Skip to content

Commit 1097ead

Browse files
novykhnovykh
committed
v5.5.0
1 parent 0e73ab7 commit 1097ead

File tree

27 files changed

+215
-96
lines changed

27 files changed

+215
-96
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@netdata/charts",
3-
"version": "5.4.3",
3+
"version": "5.5.0",
44
"description": "Netdata frontend SDK and chart utilities",
55
"main": "dist/index.js",
66
"module": "dist/es6/index.js",

‎src/chartLibraries/bars/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
4848
const [min, max] = getMinMax()
4949

5050
if (min !== prevMin || max !== prevMax) {
51-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
51+
chart.trigger("yAxisChange", min, max)
5252
}
5353

5454
prevMin = min

‎src/chartLibraries/d3pie/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default (sdk, chart) => {
8989
let [min, max] = getMinMax()
9090

9191
if (min !== prevMin || max !== prevMax) {
92-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
92+
chart.trigger("yAxisChange", min, max)
9393
}
9494

9595
prevMin = min

‎src/chartLibraries/dygraph/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export default (sdk, chart) => {
228228
if (min !== prevMin || max !== prevMax) {
229229
prevMin = min
230230
prevMax = max
231-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
231+
chart.trigger("yAxisChange", min, max)
232232
}
233233
return chart.getConvertedValue(y) // TODO Pass { dimensionId: context.id } when multiple contexts with different units
234234
},
@@ -269,7 +269,7 @@ export default (sdk, chart) => {
269269
if (min !== prevMin || max !== prevMax) {
270270
prevMin = min
271271
prevMax = max
272-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
272+
chart.trigger("yAxisChange", min, max)
273273
}
274274
const value = parseFloat(parseFloat(y).toFixed(5))
275275
return isNaN(value) ? y : value

‎src/chartLibraries/dygraph/tickers/numeric.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
const anomalySVG = `<div title="Anomaly detection percent (%)"><svg width="15" height="16" view-box="0 0 15 16" xmlns="http://www.w3.org/2000/svg" fill="#B596F8" fill-opacity="0.4" transform="translate(18, -1) scale(0.6)">
2+
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.228 3.29597L8.522 0.578973C8.167 0.373973 7.771 0.271973 7.375 0.271973C6.979 0.271973 6.583 0.373973 6.228 0.578973L1.522 3.29597C0.812 3.70597 0.375 4.46297 0.375 5.28297V10.718C0.375 11.537 0.812 12.295 1.522 12.704L6.228 15.421C6.583 15.626 6.979 15.728 7.375 15.728C7.771 15.728 8.167 15.626 8.522 15.421L13.228 12.704C13.938 12.294 14.375 11.537 14.375 10.718V5.28297C14.375 4.46297 13.938 3.70597 13.228 3.29597ZM7.97949 4.76094L7.37505 3.23265L6.7706 4.76094L4.93313 9.40688H4.37505H1.37505V10.7069H4.37505H5.37505H5.81696L5.97949 10.2959L7.37505 6.76735L8.7706 10.2959L9.26618 11.549L9.93839 10.3811L10.375 9.62253L10.8117 10.3811L10.9992 10.7069H11.375H13.375V9.40688H11.7509L10.9384 7.99531L10.375 7.01662L9.8117 7.99531L9.48391 8.56479L7.97949 4.76094Z" />
3+
</svg></div>`
4+
15
export default (a, b, pixels, opts, dygraph, vals) => {
26
const pixelsPerTick = opts("pixelsPerLabel")
37
let ticks = []
@@ -62,10 +66,10 @@ export default (a, b, pixels, opts, dygraph, vals) => {
6266
const pointHeight = (max - min) / 15 / dygraph.getArea().h
6367

6468
return [
65-
{ label_v: max - pointHeight, label: "anomaly%" },
69+
{ label_v: max - pointHeight, label: anomalySVG },
6670
...ticks.filter(
6771
tick => dygraph.toPercentYCoord(tick.v, 0) < 0.92 && dygraph.toPercentYCoord(tick.v, 0) > 0.08
6872
),
69-
{ label_v: min + pointHeight, label: "i" },
73+
{ label_v: min + pointHeight, label: "" },
7074
]
7175
}

‎src/chartLibraries/easyPie/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default (sdk, chart) => {
111111
easyPie.update(percentage)
112112

113113
if (min !== prevMin || max !== prevMax) {
114-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
114+
chart.trigger("yAxisChange", min, max)
115115
}
116116

117117
prevMin = min

‎src/chartLibraries/gauge/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export default (sdk, chart) => {
115115
let [min, max] = getMinMax()
116116

117117
if (min !== prevMin || max !== prevMax) {
118-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
118+
chart.trigger("yAxisChange", min, max)
119119
}
120120

121121
prevMin = min

‎src/chartLibraries/number/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
4848
const [min, max] = getMinMax()
4949

5050
if (min !== prevMin || max !== prevMax) {
51-
chartUI.sdk.trigger("yAxisChange", chart, min, max)
51+
chart.trigger("yAxisChange", min, max)
5252
}
5353

5454
prevMin = min

‎src/chartLibraries/table/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default (sdk, chart) => {
4848

4949
if (min !== prevMin || max !== prevMax) {
5050
// Do not pass min max in order for multi context min-max to take place
51-
chartUI.sdk.trigger("yAxisChange", chart)
51+
chart.trigger("yAxisChange")
5252
}
5353

5454
prevMin = min

‎src/components/filterToolbox/aggregate.js

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { memo, useMemo } from "react"
22
import { TextMicro } from "@netdata/netdata-ui"
3-
import { useAttributeValue, useChart } from "@/components/provider"
3+
import { useAttributeValue, useChart, useIsMinimal } from "@/components/provider"
4+
import AggrAvg from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_avg.svg"
5+
import AggrSum from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_sum.svg"
6+
import AggrMin from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_min.svg"
7+
import AggrMax from "@netdata/netdata-ui/dist/components/icon/assets/aggregation_max.svg"
48
import Dropdown from "./dropdownSingleSelect"
9+
import Icon from "@/components/icon"
510

611
const useItems = chart =>
712
useMemo(
@@ -12,6 +17,7 @@ const useItems = chart =>
1217
description:
1318
"For each point presented, calculate the average of the metrics contributing to it.",
1419
short: "AVG()",
20+
icon: <Icon svg={AggrAvg} color="textLite" size="10px" />,
1521
"data-track": chart.track("avg"),
1622
},
1723
{
@@ -20,6 +26,7 @@ const useItems = chart =>
2026
description:
2127
"For each point presented, calculate the sum of the metrics contributing to it.",
2228
short: "SUM()",
29+
icon: <Icon svg={AggrSum} color="textLite" size="10px" />,
2330
"data-track": chart.track("sum"),
2431
},
2532
{
@@ -28,6 +35,7 @@ const useItems = chart =>
2835
description:
2936
"For each point presented, present the minimum of the metrics contributing to it.",
3037
short: "MIN()",
38+
icon: <Icon svg={AggrMin} color="textLite" size="10px" />,
3139
"data-track": chart.track("min"),
3240
},
3341
{
@@ -36,6 +44,7 @@ const useItems = chart =>
3644
description:
3745
"For each point presented, present the maximum of the metrics contributing to it.",
3846
short: "MAX()",
47+
icon: <Icon svg={AggrMax} color="textLite" size="10px" />,
3948
"data-track": chart.track("max"),
4049
},
4150
],
@@ -44,8 +53,8 @@ const useItems = chart =>
4453

4554
const dropTitle = (
4655
<TextMicro padding={[0, 0, 2]} color="textLite">
47-
When aggregating multiple source time-series metrics to one visible dimension on the
48-
chart, use the following aggregation function
56+
When aggregating multiple source time-series metrics to one visible dimension on the chart, use
57+
the following aggregation function
4958
</TextMicro>
5059
)
5160

@@ -54,13 +63,14 @@ const tooltipProps = {
5463
body: "View or select the aggregation function applied when multiple source time-series metrics need to be grouped together to be presented as dimensions on this chart.",
5564
}
5665

57-
const Aggregate = ({ labelProps, ...rest }) => {
66+
const Aggregate = ({ labelProps, defaultMinimal, ...rest }) => {
5867
const chart = useChart()
5968
const value = useAttributeValue("aggregationMethod")
6069

6170
const items = useItems(chart)
71+
const isMinimal = useIsMinimal()
6272

63-
const { short } = items.find(item => item.value === value) || items[0]
73+
const { short, icon } = items.find(item => item.value === value) || items[0]
6474

6575
return (
6676
<Dropdown
@@ -71,8 +81,8 @@ const Aggregate = ({ labelProps, ...rest }) => {
7181
dropTitle={dropTitle}
7282
{...rest}
7383
labelProps={{
74-
secondaryLabel: "the",
75-
label: short,
84+
secondaryLabel: isMinimal || defaultMinimal ? "" : "the",
85+
label: isMinimal || defaultMinimal ? icon : short,
7686
title: tooltipProps.heading,
7787
tooltipProps,
7888
...labelProps,

0 commit comments

Comments
 (0)