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.

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

Feature/line chart new configs n cypress #1

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
changes for line width and fill opacity in bar mode and removed mode …
…from chartOption

Signed-off-by: rinku-kumar-psl <rinku_kumar@persistent.com>
  • Loading branch information
rinku-kumar-psl committed Jun 8, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit d39487595a1910e1438c6c228cd71dbe69df6064
2 changes: 1 addition & 1 deletion dashboards-observability/common/constants/shared.ts
Original file line number Diff line number Diff line change
@@ -154,5 +154,5 @@ export enum DefaultChartStyles {
DefaultMode = 'lines',
Interpolation = 'spline',
LineWidth = 2,
FillOpacity = 30
FillOpacity = 40
};
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true;
const legendPosition = dataConfig?.legend?.position || 'v';
const markerSize = dataConfig?.chartStyles?.pointSize || 5;
const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 100 : FillOpacity / 100;
const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200;

let valueSeries;
if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
@@ -45,28 +45,44 @@ export const Line = ({ visualizations, layout, config }: any) => {
}

const [calculatedLayout, lineValues] = useMemo(() => {
const isBarMode = mode === 'bar';

let calculatedLineValues = valueSeries.map((field: any, index: number) => {
const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity);
const barMarker = {
color: PLOTLY_COLOR[index],
opacity: fillOpacity,
line: {
color: PLOTLY_COLOR[index],
width: lineWidth
}
};
const fillProperty = {
fill: 'tozeroy',
fillcolor: fillColor,
};
return {
x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name],
y: data[field.name],
type: mode === 'bar' ? 'bar' : 'scatter',
type: isBarMode ? 'bar' : 'scatter',
name: field.name,
mode,
fill: 'tozeroy',
fillcolor: fillColor,
...!['bar', 'markers'].includes(mode) && fillProperty,
line: {
shape: lineShape,
width: lineWidth,
color: PLOTLY_COLOR[index],
},
marker: {
size: markerSize
size: markerSize,
...isBarMode && barMarker,
},
};
});

var layoutForBarMode = {
barmode: 'group',
};
const mergedLayout = {
...layout,
...layoutConfig.layout,
@@ -76,6 +92,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
orientation: legendPosition,
},
showlegend: showLegend,
...isBarMode && layoutForBarMode,
};

if (dataConfig.thresholds || availabilityConfig.level) {
Original file line number Diff line number Diff line change
@@ -63,28 +63,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({
},
],
},
{
id: 'chart_options',
name: 'Chart options',
editor: ConfigValueOptions,
mapTo: 'chartOptions',
schemas: [
{
name: 'Mode',
isSingleSelection: true,
component: null,
mapTo: 'mode',
props: {
dropdownList: [
{ name: 'Markers', modeId: 'markers' },
{ name: 'Lines', modeId: 'lines' },
{ name: 'Lines + Markers', modeId: 'lines+markers' },
],
defaultSelections: [{ name: 'Lines', modeId: 'lines' }],
},
},
],
},
{
id: 'legend',
name: 'Legend',
@@ -124,7 +102,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({
mapTo: 'chartStyles',
schemas: [
{
name: 'Style',
name: 'Mode',
component: null,
mapTo: 'style',
props: {
@@ -161,7 +139,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({
{ name: 'Center', modeId: 'center' },
{ name: 'After', modeId: 'after' },
],
defaultSelections: [{ name: 'Center', modeId: 'Center' }],
defaultSelections: [{ name: 'Center', modeId: 'center' }],
},
},
{