Browse Source

feat(dashboards): Add UTC support to `LineChartWidget` (#80493)

`BaseChart` does all the hard work, I'm just passing the prop through.
George Gritsouk 4 months ago
parent
commit
acde7b01f1

+ 6 - 0
static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.stories.tsx

@@ -69,6 +69,11 @@ export default storyBook(LineChartWidget, story => {
           some bells and whistles including automatic axes labels, and a hover tooltip.
         </p>
 
+        <p>
+          The <code>utc</code> prop controls whether the X Axis timestamps are shown in
+          UTC or not
+        </p>
+
         <SideBySide>
           <MediumWidget>
             <LineChartWidget
@@ -90,6 +95,7 @@ export default storyBook(LineChartWidget, story => {
             <LineChartWidget
               title="span.duration"
               timeseries={[durationTimeSeries1, durationTimeSeries2]}
+              utc
               meta={{
                 fields: {
                   'p99(span.duration)': 'duration',

+ 5 - 1
static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.tsx

@@ -29,7 +29,11 @@ export function LineChartWidget(props: Props) {
       onRetry={props.onRetry}
     >
       <LineChartWrapper>
-        <LineChartWidgetVisualization timeseries={timeseries} meta={props.meta} />
+        <LineChartWidgetVisualization
+          timeseries={timeseries}
+          utc={props.utc}
+          meta={props.meta}
+        />
       </LineChartWrapper>
     </WidgetFrame>
   );

+ 2 - 0
static/app/views/dashboards/widgets/lineChartWidget/lineChartWidgetVisualization.tsx

@@ -9,6 +9,7 @@ import {formatChartValue} from './formatChartValue';
 export interface LineChartWidgetVisualizationProps {
   timeseries: TimeseriesData[];
   meta?: Meta;
+  utc?: boolean;
 }
 
 export function LineChartWidgetVisualization(props: LineChartWidgetVisualizationProps) {
@@ -35,6 +36,7 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
           }),
         });
       })}
+      utc={props.utc}
       legend={{
         top: 0,
         left: 0,