Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provisioning for events updated #289

Merged
merged 3 commits into from
May 19, 2024
Merged

Provisioning for events updated #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
172eca7
provisioning for events updated
vitPinchuk May 17, 2024
7bcfea5
Merge branch 'main' into feat./events-dashboard-provisioning-upd
mikhail-vl May 18, 2024
9677335
Update panel options
mikhail-vl May 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 81 additions & 22 deletions provisioning/dashboards/events.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 1,
"id": 22,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "grafana",
"type": "datasource",
"uid": "grafana"
},
"fieldConfig": {
Expand All @@ -32,8 +33,10 @@
"mode": "palette-classic"
},
"custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisGridShow": true,
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
Expand All @@ -45,14 +48,15 @@
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"spanNulls": true,
"stacking": {
"group": "A",
"mode": "none"
Expand All @@ -74,12 +78,14 @@
"value": 80
}
]
}
},
"unit": "none",
"unitScale": true
},
"overrides": []
},
"gridPos": {
"h": 8,
"h": 10,
"w": 12,
"x": 0,
"y": 0
Expand All @@ -93,12 +99,13 @@
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
"mode": "multi",
"sort": "asc"
}
},
"targets": [
{
"channel": "plugin/testdata/random-2s-stream",
"datasource": {
"type": "datasource",
"uid": "grafana"
Expand All @@ -121,6 +128,7 @@
"mode": "palette-classic"
},
"custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
Expand All @@ -134,6 +142,7 @@
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
Expand Down Expand Up @@ -163,12 +172,13 @@
"value": 80
}
]
}
},
"unitScale": true
},
"overrides": []
},
"gridPos": {
"h": 8,
"h": 10,
"w": 12,
"x": 12,
"y": 0
Expand All @@ -182,7 +192,7 @@
"showLegend": true
},
"tooltip": {
"mode": "single",
"mode": "multi",
"sort": "none"
}
},
Expand All @@ -201,31 +211,76 @@
},
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "4ytGZmF4k"
"type": "datasource",
"uid": "grafana"
},
"gridPos": {
"h": 8,
"h": 9,
"w": 12,
"x": 0,
"y": 8
"y": 10
},
"id": 4,
"options": {
"baidu": {
"callback": "bmapReady",
"key": ""
},
"editor": {
"format": "auto"
},
"editorMode": "code",
"gaode": {
"key": "",
"plugin": "AMap.Scale,AMap.ToolBar"
},
"getOption": "let series;\nlet data;\n\nconst subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n\n if (data?.origin?.path[0] !== 'echarts-walk-1') {\n\n const options = context.panel.chart.getOption()\n const series = options.series\n const newSeries = series.map(s => ({\n ...s,\n markLine: {\n data: [\n {\n xAxis: data.payload?.point?.time || 0\n }\n ],\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }\n }))\n\n context.panel.chart.setOption({\n ...options,\n series: newSeries,\n markLine: [{\n animationEasing: \"linear\",\n animation: false,\n lineStyle: {\n type: \"dashed\"\n },\n symbolOffset: 0,\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }]\n })\n }\n if (data?.origin?.path[0] === 'echarts-walk-1') {\n\n const options = context.panel.chart.getOption()\n const series = options.series\n const newSeries = series.map(s => ({\n ...s,\n markLine: {\n data: [\n {\n xAxis: 0\n }\n ],\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }\n }))\n\n context.panel.chart.setOption({\n ...options,\n series: newSeries,\n markLine: []\n })\n\n }\n})\n\n\nseries = context.panel.data.series.map((s) => {\n const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n\n return {\n name: s.refId,\n type: 'line',\n showSymbol: false,\n areaStyle: {\n opacity: 0.1,\n },\n lineStyle: {\n width: 1,\n },\n data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n };\n});\n\n\ndata = context.panel.data.series.map((s) => s.refId)\n\ncontext.panel.chart.on('mousemove', function (params) {\n\n context.grafana.eventBus.publish({\n type: 'data-hover', payload: {\n point: {\n time: params.value[0]\n }\n },\n origin: {\n path: ['echarts-walk-1']\n }\n })\n});\n\n\n\n\n\nreturn {\n version: 2,\n config: { notMerge: true },\n option: {\n backgroundColor: 'transparent',\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n lineStyle: {\n type: 'dashed',\n width: 3\n }\n }\n },\n legend: {\n left: '0',\n bottom: '0',\n data: data,\n textStyle: {\n color: 'rgba(128, 128, 128, .9)',\n },\n },\n toolbox: {\n feature: {\n dataZoom: {\n yAxisIndex: 'none',\n icon: {\n zoom: 'path://',\n back: 'path://',\n },\n },\n saveAsImage: {},\n }\n },\n xAxis: {\n type: 'time',\n axisTick: {\n inside: true\n }\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n axisTick: {\n inside: true\n }\n },\n grid: {\n left: '2%',\n right: '2%',\n top: '2%',\n bottom: 24,\n containLabel: true,\n },\n series,\n },\n unsubscribe: () => {\n subscription.unsubscribe();\n console.log('Unsubscribed');\n }\n}\n",
"google": {
"callback": "gmapReady",
"key": ""
},
"map": "none",
"renderer": "canvas",
"themeEditor": {
"config": "{}",
"name": "default"
},
"visualEditor": {
"code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n",
"dataset": [],
"series": []
}
},
"id": 2,
"pluginVersion": "6.1.0",
"title": "Random Walk 1",
"type": "volkovlabs-echarts-panel"
},
{
"datasource": {
"type": "datasource",
"uid": "grafana"
},
"gridPos": {
"h": 9,
"w": 12,
"x": 12,
"y": 10
},
"id": 5,
"options": {
"baidu": {
"callback": "bmapReady",
"key": ""
},
"editor": {
"format": "auto",
"height": 600
"format": "auto"
},
"editorMode": "code",
"gaode": {
"key": "",
"plugin": "AMap.Scale,AMap.ToolBar"
},
"getOption": "const subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n console.log('React to Data Hover', data);\n})\n\nreturn {\n version: 2,\n unsubscribe: () => {\n subscription.unsubscribe();\n console.log('Unsubscribed');\n }\n}\n",
"getOption": "let series;\nlet data;\n\nconst subscription = context.grafana.eventBus.subscribe({ type: 'data-hover' }, (data) => {\n\n\n if (data?.origin?.path[0] !== 'echarts-walk-2') {\n\n const options = context.panel.chart.getOption()\n const series = options.series\n const newSeries = series.map(s => ({\n ...s,\n markLine: {\n data: [\n {\n xAxis: data.payload?.point?.time || 0\n }\n ],\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }\n }))\n\n context.panel.chart.setOption({\n ...options,\n series: newSeries,\n markLine: [{\n animationEasing: \"linear\",\n animation: false,\n lineStyle: {\n type: \"dashed\"\n },\n symbolOffset: 0,\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }]\n })\n }\n if (data?.origin?.path[0] === 'echarts-walk-2') {\n\n const options = context.panel.chart.getOption()\n\n const series = options.series\n const newSeries = series.map(s => ({\n ...s,\n markLine: {\n data: [\n {\n xAxis: 0\n }\n ],\n label: {\n show: false\n },\n symbol: [\n \"none\",\n \"none\"\n ]\n }\n }))\n\n context.panel.chart.setOption({\n ...options,\n series: newSeries,\n markLine: []\n })\n\n }\n})\n\n\nseries = context.panel.data.series.map((s) => {\n const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;\n const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;\n\n return {\n name: s.refId,\n type: 'line',\n showSymbol: false,\n areaStyle: {\n opacity: 0.1,\n },\n lineStyle: {\n width: 1,\n },\n data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),\n };\n});\n\n\ndata = context.panel.data.series.map((s) => s.refId)\n\ncontext.panel.chart.on('mousemove', function (params) {\n context.grafana.eventBus.publish({\n type: 'data-hover', payload: {\n point: {\n time: params.value[0]\n }\n },\n origin: {\n path: ['echarts-walk-2']\n }\n })\n});\n\n\nreturn {\n version: 2,\n config: { notMerge: true },\n option: {\n backgroundColor: 'transparent',\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n lineStyle: {\n type: 'dashed',\n width: 3\n }\n }\n },\n legend: {\n left: '0',\n bottom: '0',\n data: data,\n textStyle: {\n color: 'rgba(128, 128, 128, .9)',\n },\n },\n toolbox: {\n feature: {\n dataZoom: {\n yAxisIndex: 'none',\n icon: {\n zoom: 'path://',\n back: 'path://',\n },\n },\n saveAsImage: {},\n }\n },\n xAxis: {\n type: 'time',\n axisTick: {\n inside: true\n }\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n axisTick: {\n inside: true\n }\n },\n grid: {\n left: '2%',\n right: '2%',\n top: '2%',\n bottom: 24,\n containLabel: true,\n },\n series,\n },\n unsubscribe: () => {\n subscription.unsubscribe();\n console.log('Unsubscribed');\n }\n}\n",
"google": {
"callback": "gmapReady",
"key": ""
Expand All @@ -234,17 +289,21 @@
"renderer": "canvas",
"themeEditor": {
"config": "{}",
"height": 400,
"name": "default"
},
"visualEditor": {
"code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n",
"dataset": [],
"series": []
}
},
"title": "Data-Hover Subscribe",
"pluginVersion": "6.1.0",
"title": "Random Walk 2",
"type": "volkovlabs-echarts-panel"
}
],
"refresh": "",
"schemaVersion": 38,
"style": "dark",
"schemaVersion": 39,
"tags": [],
"templating": {
"list": []
Expand Down
1 change: 1 addition & 0 deletions src/components/EchartsEditor/EchartsEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ describe('Echarts Editor', () => {
monacoOptions: {
formatOnPaste: true,
formatOnType: true,
scrollBeyondLastLine: false,
},
}),
expect.anything()
Expand Down
2 changes: 1 addition & 1 deletion src/components/EchartsEditor/EchartsEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
value={value}
onBlur={onChange}
onSave={onChange}
monacoOptions={monacoOptions}
monacoOptions={{ ...monacoOptions, scrollBeyondLastLine: false }}
onEditorDidMount={onEditorMount}
{...getItemSpecificEditorProps()}
/>
Expand Down
23 changes: 19 additions & 4 deletions src/constants/echarts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,29 @@ export enum Theme {
* Theme options
*/
export const THEME_OPTIONS = [
{ value: Theme.DEFAULT, label: 'Default', description: 'Default ECharts theme' },
{ value: Theme.CUSTOM, label: 'Custom', description: 'Ability to use custom ECharts theme' },
{ value: Theme.DEFAULT, label: 'Default', description: 'Default ECharts theme', icon: 'star' },
{
value: Theme.CUSTOM,
label: 'Custom',
description: 'Ability to use custom ECharts theme',
icon: 'presentation-play',
},
];

/**
* Renderer Options
*/
export const RENDERER_OPTIONS = [
{ value: Renderer.CANVAS, label: 'Canvas', description: 'More suitable for charts with a large number of elements.' },
{ value: Renderer.SVG, label: 'SVG', description: 'Has less memory usage, no blur when using the browser zoom.' },
{
value: Renderer.CANVAS,
label: 'Canvas',
description: 'More suitable for charts with a large number of elements.',
icon: 'gf-landscape',
},
{
value: Renderer.SVG,
label: 'SVG',
description: 'Has less memory usage, no blur when using the browser zoom.',
icon: 'gf-grid',
},
];
8 changes: 4 additions & 4 deletions src/constants/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,16 @@ export enum EditorMode {
* Editor Mode Options
*/
export const EDITOR_MODE_OPTIONS = [
{ value: EditorMode.CODE, label: 'Code' },
{ value: EditorMode.VISUAL, label: 'Visual' },
{ value: EditorMode.CODE, label: 'Code', icon: 'keyboard' },
{ value: EditorMode.VISUAL, label: 'Visual', icon: 'chart-line' },
];

/**
* Format Options
*/
export const FORMAT_OPTIONS = [
{ value: Format.AUTO, label: 'Auto' },
{ value: Format.NONE, label: 'Disabled' },
{ value: Format.AUTO, label: 'Auto', icon: 'thumbs-up' },
{ value: Format.NONE, label: 'Disabled', icon: 'toggle-off' },
];

/**
Expand Down
6 changes: 3 additions & 3 deletions src/constants/maps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export enum Map {
export const MAP_OPTIONS = [
{ value: Map.BMAP, label: 'Baidu', description: 'Requires Baidu Maps.' },
{ value: Map.AMAP, label: 'Gaode', description: 'Requires Gaode Maps.' },
{ value: Map.GMAP, label: 'Google', description: 'Requires Google Maps.' },
{ value: Map.JSON, label: 'JSON', description: 'Includes World and USA maps.' },
{ value: Map.NONE, label: 'None' },
{ value: Map.GMAP, label: 'Google', description: 'Requires Google Maps.', icon: 'google' },
{ value: Map.JSON, label: 'JSON', description: 'Includes World and USA maps.', icon: 'map-marker' },
{ value: Map.NONE, label: 'None', icon: 'minus-circle' },
];

/**
Expand Down
59 changes: 29 additions & 30 deletions src/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,15 +120,25 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
/**
* Editor
*/
builder.addRadio({
path: 'editorMode',
name: 'Editor Mode',
defaultValue: EditorMode.VISUAL,
settings: {
options: EDITOR_MODE_OPTIONS,
},
category: ['Editor'],
});
builder
.addRadio({
path: 'editorMode',
name: 'Editor Mode',
defaultValue: EditorMode.VISUAL,
settings: {
options: EDITOR_MODE_OPTIONS,
},
category: ['Editor'],
})
.addRadio({
path: 'editor.format',
name: 'Formatting',
settings: {
options: FORMAT_OPTIONS,
},
defaultValue: DEFAULT_OPTIONS.editor.format,
category: ['Editor'],
});

/**
* Visual Editor
Expand Down Expand Up @@ -157,27 +167,16 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
/**
* Code Editor
*/
builder
.addRadio({
path: 'editor.format',
name: 'Formatting',
settings: {
options: FORMAT_OPTIONS,
},
defaultValue: DEFAULT_OPTIONS.editor.format,
category: ['Code'],
showIf: isCodeEditor,
})
.addCustomEditor({
id: Editor.CODE,
path: 'getOption',
name: 'Function',
description: 'Should return parameters and data for setOption() or an extended result object.',
defaultValue: DEFAULT_OPTIONS.getOption,
editor: EchartsEditor,
category: ['Code'],
showIf: isCodeEditor,
});
builder.addCustomEditor({
id: Editor.CODE,
path: 'getOption',
name: 'Function',
description: 'Should return parameters and data for setOption() or an extended result object.',
defaultValue: DEFAULT_OPTIONS.getOption,
editor: EchartsEditor,
category: ['Code'],
showIf: isCodeEditor,
});

/**
* Theme
Expand Down
Loading