added string parser for date

apps/web/src/components/ui/charts/stories/BusterChart.BarChart.stories.tsx

@@ -1482,3 +1482,152 @@ export const BarChartWithProblemData: Story = {
     ],
   },
 };
+
+export const BarChartWithSortedDayOfWeek: Story = {
+  args: {
+    colors: [
+      '#B399FD',
+      '#FC8497',
+      '#FBBC30',
+      '#279EFF',
+      '#E83562',
+      '#41F8FF',
+      '#F3864F',
+      '#C82184',
+      '#31FCB4',
+      '#E83562',
+    ],
+    barLayout: 'vertical',
+    barSortBy: ['desc'],
+    goalLines: [],
+    gridLines: true,
+    trendlines: [],
+    barGroupType: 'group',
+    xAxisDataZoom: false,
+    barAndLineAxis: {
+      x: ['day_of_week'],
+      y: ['message_count'],
+      category: [],
+      tooltip: null,
+    },
+    columnSettings: {
+      day_of_week: {
+        lineType: 'normal',
+        lineStyle: 'line',
+        lineWidth: 2,
+        barRoundness: 8,
+        lineSymbolSize: 0,
+        showDataLabels: false,
+        columnVisualization: 'bar',
+        showDataLabelsAsPercentage: false,
+      },
+      message_count: {
+        lineType: 'normal',
+        lineStyle: 'line',
+        lineWidth: 2,
+        barRoundness: 8,
+        lineSymbolSize: 0,
+        showDataLabels: false,
+        columnVisualization: 'bar',
+        showDataLabelsAsPercentage: false,
+      },
+    },
+    disableTooltip: false,
+    yAxisScaleType: 'linear',
+    y2AxisScaleType: 'linear',
+    barShowTotalAtTop: false,
+    selectedChartType: 'bar',
+    columnLabelFormats: {
+      day_of_week: {
+        style: 'date',
+        prefix: '',
+        suffix: '',
+        currency: 'USD',
+        columnType: 'number',
+        dateFormat: 'auto',
+        multiplier: 1,
+        displayName: 'Day of Week',
+        compactNumbers: false,
+        convertNumberTo: 'day_of_week',
+        useRelativeTime: false,
+        numberSeparatorStyle: null,
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0,
+        replaceMissingDataWith: null,
+      } as ColumnLabelFormat,
+      message_count: {
+        style: 'number',
+        prefix: '',
+        suffix: '',
+        currency: 'USD',
+        columnType: 'number',
+        dateFormat: 'auto',
+        multiplier: 1,
+        displayName: 'Messages Sent',
+        compactNumbers: false,
+        useRelativeTime: false,
+        numberSeparatorStyle: ',',
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0,
+        replaceMissingDataWith: 0,
+      } as ColumnLabelFormat,
+    },
+    showLegendHeadline: false,
+    xAxisLabelRotation: 'auto',
+    xAxisShowAxisLabel: true,
+    xAxisShowAxisTitle: true,
+    yAxisShowAxisLabel: true,
+    yAxisShowAxisTitle: true,
+    y2AxisShowAxisLabel: true,
+    y2AxisShowAxisTitle: true,
+    y2AxisStartAxisAtZero: true,
+    columnMetadata: [
+      {
+        name: 'day_of_week',
+        min_value: 0,
+        max_value: 6,
+        unique_values: 7,
+        simple_type: 'number',
+        type: 'numeric',
+      },
+      {
+        name: 'message_count',
+        min_value: 2,
+        max_value: 140,
+        unique_values: 7,
+        simple_type: 'number',
+        type: 'int8',
+      },
+    ],
+    data: [
+      {
+        day_of_week: 0,
+        message_count: 2,
+      },
+      {
+        day_of_week: 1,
+        message_count: 127,
+      },
+      {
+        day_of_week: 2,
+        message_count: 119,
+      },
+      {
+        day_of_week: 3,
+        message_count: 140,
+      },
+      {
+        day_of_week: 4,
+        message_count: 122,
+      },
+      {
+        day_of_week: 5,
+        message_count: 106,
+      },
+      {
+        day_of_week: 6,
+        message_count: 5,
+      },
+    ],
+  },
+};

apps/web/src/lib/date.ts

@@ -96,14 +96,20 @@ export const numberDateFallback = (
   return String(date);
 };
 
-const extractDateForFormatting = (
+export const extractDateForFormatting = (
   date: string | number | Date,
   dateKey?: string,
   convertNumberTo?: ColumnLabelFormat['convertNumberTo']
 ) => {
-  if (isString(date)) return date;
-  if (isNumber(date)) return numberDateFallback(date, dateKey, convertNumberTo);
   if (isDate(date)) return new Date(date);
+  if (isNumber(date)) return numberDateFallback(date, dateKey, convertNumberTo);
+  if (convertNumberTo && convertNumberTo !== 'number') {
+    //this will happen when the date is a string and we need to convert it to a number like '1' -> 1
+    const parsedInt = parseInt(date as string);
+    if (Number.isNaN(parsedInt)) return String(date);
+    return numberDateFallback(parsedInt, dateKey, convertNumberTo);
+  }
+  if (isString(date)) return date;
   return String(date);
 };