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,10 +17,10 @@ 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 */ 
+/** X Scales */
 export const linearXScale: LinearScale = {
   name: "xscale",
   clamp: true,
@@ -51,7 +51,7 @@ export const timeXScale: TimeScale = {
   domain: { data: "domain", field: "x" },
 };
 
-/** Y Scales */ 
+/** Y Scales */
 export const linearYScale: LinearScale = {
   name: "yscale",
   type: "linear",
@@ -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
@@ -270,13 +277,13 @@ export function buildVegaSpec(
                     tooltip: {
                       signal: dateTime
                         ? "{ probability: datum.y, value: datetime(datum.x) }"
-                        : "{ probability: datum.y, value: datum.x }", 
+                        : "{ probability: datum.y, value: datum.x }",
                     },
                   },
                   update: {
                     x: {
                       scale: "xscale",
-                      field:  "x",
+                      field: "x",
                       offset: 0.5, // if this is not included, the circles are slightly left of center.
                     },
                     y: {

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,
     }}
   >