Browse Source

Merge branch 'bar-pod-legend' into 'main'

Grafana Legend instead of build-in Legend

See merge request chartwerk/grafana-chartwerk-panel!13
pull/2/head
Alexander Velikiy 2 years ago
parent
commit
32b40ca8cc
  1. 20
      src/components/Panel.tsx
  2. 1
      src/models/options/barOptions.ts

20
src/components/Panel.tsx

@ -11,6 +11,8 @@ import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
import { ChartwerkBarPod } from '@chartwerk/bar-pod'; import { ChartwerkBarPod } from '@chartwerk/bar-pod';
import { PanelData, TimeRange, PanelProps } from '@grafana/data'; import { PanelData, TimeRange, PanelProps } from '@grafana/data';
import { VizLegend } from '@grafana/ui';
import { LegendDisplayMode } from '@grafana/schema';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
@ -24,7 +26,6 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
// we request animation frame here because we need an existing DOM-element at the moment we render the pod // we request animation frame here because we need an existing DOM-element at the moment we render the pod
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
console.log('pod', options.visualizationType);
let pod; let pod;
switch (options.visualizationType) { switch (options.visualizationType) {
case Pod.GAUGE: case Pod.GAUGE:
@ -35,7 +36,6 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
case Pod.BAR: case Pod.BAR:
const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries(); const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries();
const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions(); const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions();
console.log('data', barSeries, chartwerkBarOptions);
pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions); pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions);
break; break;
default: default:
@ -52,17 +52,29 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
} }
window.open(options.gauge.link, '_self'); window.open(options.gauge.link, '_self');
}; };
const legendItems = _.map(grafanaSeriesList, (serie) => {
return {
label: serie.alias,
color: serie.color,
yAxis: 1,
};
});
const chartHeight = options.visualizationType !== Pod.GAUGE ? height - 20 : height;
return ( return (
<div>
<div <div
ref={chartContainer} ref={chartContainer}
className={css` className={css`
width: ${width}px; width: ${width}px;
height: ${height}px; height: ${chartHeight}px;
cursor: ${isLinkActive ? 'pointer' : 'default'}; cursor: ${isLinkActive ? 'pointer' : 'default'};
`} `}
onClick={chartClickHandler} onClick={chartClickHandler}
></div> ></div>
{options.visualizationType !== Pod.GAUGE && (
<VizLegend placement={'bottom'} items={legendItems} displayMode={LegendDisplayMode.List} />
)}
</div>
); );
} }

1
src/models/options/barOptions.ts

@ -26,6 +26,7 @@ export class BarOptions {
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, scroll: { zoom: { isActive: false }, pan: { isActive: false } },
mouse: { doubleClick: { isActive: false } }, mouse: { doubleClick: { isActive: false } },
}, },
renderLegend: false,
annotations: [ annotations: [
{ key: 'm-1', color: 'red' }, { key: 'm-1', color: 'red' },
{ key: 'm-2', color: 'green' }, { key: 'm-2', color: 'green' },

Loading…
Cancel
Save