rename to xAxisType

packages/components/src/components/DistributionChart.tsx

@@ -32,7 +32,7 @@ export type DistributionChartProps = {
   width?: number;
   height: number;
   sample?: boolean;
-  xAxis?: "number" | "dateTime";
+  xAxisType?: "number" | "dateTime";
 } & DistributionPlottingSettings;
 
 export function defaultPlot(distribution: Distribution): Plot {
@@ -56,7 +56,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
     width,
     logX,
     actions = false,
-    xAxis = "number",
+    xAxisType = "number",
   } = props;
   const [sized] = useSize((size) => {
     const shapes = flattenResult(

packages/components/src/components/SquiggleChart.tsx

@@ -52,7 +52,7 @@ export interface SquiggleChartProps {
   /** Specify the upper bound of the x scale */
   maxX?: number;
   /** Whether the x-axis should be dates or numbers */
-  xAxis?: "number" | "dateTime";
+  xAxisType?: "number" | "dateTime";
   /** Whether to show vega actions to the user, so they can copy the chart spec */
   distributionChartActions?: boolean;
   enableLocalSettings?: boolean;
@@ -81,7 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     maxX,
     color,
     title,
-    xAxis = "number",
+    xAxisType = "number",
     distributionChartActions,
     enableLocalSettings = false,
   }) => {
@@ -103,7 +103,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       maxX,
       color,
       title,
-      xAxis,
+      xAxisType,
       actions: distributionChartActions,
     };
 

packages/components/src/lib/distributionSpecBuilder.ts

@@ -17,7 +17,7 @@ export type DistributionChartSpecOptions = {
   /** Whether or not to show the band of sample data at the bottom */
   sample?: boolean;
   /** Whether the x-axis should be dates or numbers */
-  xAxis?: "number" | "dateTime";
+  xAxisType?: "number" | "dateTime";
 };
 
 /** X Scales */
@@ -77,9 +77,16 @@ const width = 500;
 export function buildVegaSpec(
   specOptions: DistributionChartSpecOptions
 ): VisualizationSpec {
-  const { title, minX, maxX, logX, expY, xAxis = "number" } = specOptions;
+  const {
+    title,
+    minX,
+    maxX,
+    logX,
+    expY,
+    xAxisType = "number",
+  } = specOptions;
 
-  const dateTime = xAxis === "dateTime";
+  const dateTime = xAxisType === "dateTime";
 
   // some fallbacks
   const format = specOptions?.format

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -87,7 +87,7 @@ could be continuous, discrete or mixed.
     args={{
       code: "mx(1661819770311, 1661829770311, 1661839770311)",
       width,
-      xAxis: "dateTime",
+      xAxisType: "dateTime",
       width,
     }}
   >