feat: xy-plot y axis lable changes #2378

awslabs · Jan 5, 2024 · 48389c3 · 48389c3
1 parent a6f9c22
commit 48389c3
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 30 deletions.
diff --git a/...es/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/section.tsx b/...es/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/section.tsx
@@ -212,6 +212,13 @@ const RenderLineAndScatterStyleSettingsSection = ({
     });
   };
 
+  const handleUpdateYLabel = (yLabel: string | null) => {
+    updateAxis({ ...axis, yLabel: yLabel ?? undefined });
+    logCustomYAxis({
+      yLabel: `${yLabel}`,
+    });
+  };
+
   return (
     <SpaceBetween size='s' direction='vertical'>
       <AggregationAndResolutionSection
@@ -226,9 +233,11 @@ const RenderLineAndScatterStyleSettingsSection = ({
         visible={axis?.yVisible ?? true}
         min={axis?.yMin ?? null}
         max={axis?.yMax ?? null}
+        yLabel={axis?.yLabel ?? null}
         setVisible={handleSetVisible}
         updateMin={handleUpdateMin}
         updateMax={handleUpdateMax}
+        updateYLabel={handleUpdateYLabel}
       />
       <LineStyleSection
         lineType={connectionStyle}

diff --git a/...ages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/yAxis.tsx b/...ages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/yAxis.tsx
@@ -1,20 +1,33 @@
+import React from 'react';
+import type { FC } from 'react';
+
 import FormField from '@cloudscape-design/components/form-field';
 import Input from '@cloudscape-design/components/input';
-import type { FC } from 'react';
-import React from 'react';
-import StyleExpandableSection from '../shared/styleExpandableSection/styleExpandableSection';
 import Box from '@cloudscape-design/components/box';
 
+import StyleExpandableSection from '../shared/styleExpandableSection/styleExpandableSection';
+
 type YAxisSectionOptions = {
   visible: boolean;
   min: number | null;
   max: number | null;
+  yLabel: string | null;
   setVisible: (visible: boolean) => void;
   updateMin: (min: number | null) => void;
   updateMax: (max: number | null) => void;
+  updateYLabel: (yLabel: string | null) => void;
 };
 
-export const YAxisSection: FC<YAxisSectionOptions> = ({ visible, min, max, setVisible, updateMin, updateMax }) => {
+export const YAxisSection: FC<YAxisSectionOptions> = ({
+  visible,
+  min,
+  max,
+  yLabel,
+  setVisible,
+  updateMin,
+  updateMax,
+  updateYLabel,
+}) => {
   const onSetRange = (updater: (value: number | null) => void, value: string) => {
     const parsed = parseInt(value);
     updater(isNaN(parsed) ? null : parsed);
@@ -23,25 +36,37 @@ export const YAxisSection: FC<YAxisSectionOptions> = ({ visible, min, max, setVi
   return (
     <StyleExpandableSection header='Y-axis' visible={visible} setVisible={setVisible}>
       <Box padding='s'>
-        <FormField description='Leave empty to auto-calculate based on all the values' label='Range'>
-          <label htmlFor='y-axis-min'>Min</label>
-          <Input
-            placeholder='Auto'
-            controlId='y-axis-min'
-            value={`${min ?? ''}`}
-            type='number'
-            onChange={({ detail }) => onSetRange(updateMin, detail.value)}
-          />
+        <Box padding={{ bottom: 'xs' }}>
+          <FormField label='Label'>
+            <Input
+              placeholder='Input Y-axis label'
+              value={`${yLabel ?? ''}`}
+              type='text'
+              onChange={({ detail }) => updateYLabel(detail.value)}
+            />
+          </FormField>
+        </Box>
+        <Box>
+          <FormField description='Leave empty to auto-calculate based on all the values' label='Range'>
+            <label htmlFor='y-axis-min'>Min</label>
+            <Input
+              placeholder='Auto'
+              controlId='y-axis-min'
+              value={`${min ?? ''}`}
+              type='number'
+              onChange={({ detail }) => onSetRange(updateMin, detail.value)}
+            />
 
-          <label htmlFor='y-axis-max'>Max</label>
-          <Input
-            placeholder='Auto'
-            controlId='y-axis-max'
-            value={`${max ?? ''}`}
-            type='number'
-            onChange={({ detail }) => onSetRange(updateMax, detail.value)}
-          />
-        </FormField>
+            <label htmlFor='y-axis-max'>Max</label>
+            <Input
+              placeholder='Auto'
+              controlId='y-axis-max'
+              value={`${max ?? ''}`}
+              type='number'
+              onChange={({ detail }) => onSetRange(updateMax, detail.value)}
+            />
+          </FormField>
+        </Box>
       </Box>
     </StyleExpandableSection>
   );

diff --git a/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx b/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx
@@ -115,6 +115,7 @@ const convertAxis = (axis: ChartAxisOptions | undefined) => ({
   showX: axis?.xVisible,
   yMin: axis?.yMin,
   yMax: axis?.yMax,
+  yLabel: axis?.yLabel,
 });
 
 const removeHiddenDataStreams = (widget: LineScatterChartWidget): LineScatterChartWidget => ({

diff --git a/packages/dashboard/src/customization/widgets/types.ts b/packages/dashboard/src/customization/widgets/types.ts
@@ -133,6 +133,7 @@ export type YAxisOptions = YAxisRange & {
 export type ChartAxisOptions = YAxisRange & {
   yVisible?: boolean;
   xVisible?: boolean;
+  yLabel?: string;
 };
 
 type ChartLegendContent = 'unit' | 'asset';

diff --git a/packages/react-components/src/components/chart/chartOptions/axes/yAxis.ts b/packages/react-components/src/components/chart/chartOptions/axes/yAxis.ts
@@ -4,12 +4,14 @@ import { DEFAULT_Y_AXIS } from '../../eChartsConstants';
 
 export const convertYAxis = (axis: ChartAxisOptions | undefined): YAXisComponentOption => ({
   ...DEFAULT_Y_AXIS,
-  name: axis?.yAxisLabel,
+  name: axis?.yLabel,
   show: axis?.showY ?? DEFAULT_Y_AXIS.show,
   min: axis?.yMin ?? undefined,
   max: axis?.yMax ?? undefined,
   axisLabel: {
     hideOverlap: true,
     color: '#5f6b7a',
   },
+  nameLocation: 'middle',
+  nameGap: 30,
 });
diff --git a/packages/react-components/src/components/chart/chartOptions/converters.spec.ts b/packages/react-components/src/components/chart/chartOptions/converters.spec.ts
@@ -48,28 +48,28 @@ describe('testing converters', () => {
   it('converts axis to eCharts axis', async () => {
     [
       {
-        yAxisLabel: 'Y Value',
+        yLabel: 'Y Value',
         yMin: 0,
         yMax: 100,
         showY: true,
         showX: true,
       },
       {
-        yAxisLabel: 'Y Value',
+        yLabel: 'Y Value',
         yMin: 0,
         yMax: 100,
         showY: false,
         showX: false,
       },
       {
-        yAxisLabel: 'Y Value',
+        yLabel: 'Y Value',
         yMin: 0,
         yMax: 100,
         showY: true,
         showX: false,
       },
       {
-        yAxisLabel: 'Y Value',
+        yLabel: 'Y Value',
         yMin: 0,
         yMax: 100,
         showY: false,
@@ -79,7 +79,7 @@ describe('testing converters', () => {
       const convertedYAxis = convertYAxis(axis_values);
 
       expect(convertedYAxis).toHaveProperty('type', 'value');
-      expect(convertedYAxis).toHaveProperty('name', axis_values.yAxisLabel);
+      expect(convertedYAxis).toHaveProperty('name', axis_values.yLabel);
       expect(convertedYAxis).toHaveProperty('show', axis_values.showY);
     });
   });

diff --git a/...eact-components/src/components/chart/chartOptions/seriesAndYAxis/convertSeriesAndYAxis.ts b/...eact-components/src/components/chart/chartOptions/seriesAndYAxis/convertSeriesAndYAxis.ts
@@ -110,7 +110,7 @@ const convertYAxis = ({ color, yAxis }: ChartStyleSettingsOptions): YAXisCompone
      */
     show: true,
     axisLabel: { show: false },
-    name: yAxis.yAxisLabel,
+    name: yAxis.yLabel,
     min: yAxis.yMin,
     max: yAxis.yMax,
     alignTicks: true,

diff --git a/packages/react-components/src/components/chart/types.ts b/packages/react-components/src/components/chart/types.ts
@@ -3,7 +3,7 @@ import { OptionId } from 'echarts/types/src/util/types';
 import { InternalGraphicComponentGroupOption } from './trendCursor/types';
 
 export type YAxisOptions = {
-  yAxisLabel?: string;
+  yLabel?: string;
   yMin?: number;
   yMax?: number;
 };