storybook for date distribution, grab missing things necessary for date distribution in spec

This commit is contained in:
Conor Barnes 2022-08-29 18:01:07 -03:00
parent 0292c66c80
commit 496bd0e539
4 changed files with 35 additions and 5 deletions

View File

@ -57,6 +57,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
actions = false, actions = false,
xAxis = "number", xAxis = "number",
} = props; } = props;
console.log({ plot });
const [sized] = useSize((size) => { const [sized] = useSize((size) => {
const shapes = flattenResult( const shapes = flattenResult(
plot.distributions.map((x) => plot.distributions.map((x) =>

View File

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

View File

@ -77,7 +77,6 @@ export function buildVegaSpec(
specOptions: DistributionChartSpecOptions specOptions: DistributionChartSpecOptions
): VisualizationSpec { ): VisualizationSpec {
const { const {
format = defaultTickFormat,
title, title,
minX, minX,
maxX, maxX,
@ -89,6 +88,13 @@ export function buildVegaSpec(
const dateTime = xAxis === "dateTime"; const dateTime = xAxis === "dateTime";
// some fallbacks
const format = specOptions?.format
? specOptions.format
: dateTime
? timeTickFormat
: defaultTickFormat;
let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale; let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale;
if (minX !== undefined && Number.isFinite(minX)) { if (minX !== undefined && Number.isFinite(minX)) {
@ -125,8 +131,10 @@ export function buildVegaSpec(
}, },
{ {
name: "position_scaled", name: "position_scaled",
value: 0, value: null,
update: "position ? invert('xscale', position[0]) : null", update: "isArray(position) ? invert('xscale', position[0]) : ''",
// value: 0,
// update: "position ? invert('xscale', position[0]) : null",
}, },
], ],
scales: [ scales: [
@ -152,7 +160,7 @@ export function buildVegaSpec(
domainColor: "#fff", domainColor: "#fff",
domainOpacity: 0.0, domainOpacity: 0.0,
format: format, format: format,
tickCount: 10, tickCount: dateTime ? 3 : 10,
labelOverlap: "greedy", labelOverlap: "greedy",
}, },
], ],
@ -308,7 +316,9 @@ export function buildVegaSpec(
}, },
update: { update: {
text: { text: {
signal: "position_scaled ? format(position_scaled, ',.4r') : ''", signal: dateTime
? "position_scaled ? utcyear(position_scaled) + '-' + utcmonth(position_scaled) + '-' + utcdate(position_scaled) + 'T' + utchours(position_scaled)+':' +utcminutes(position_scaled) : ''"
: "position_scaled ? format(position_scaled, ',.4r') : ''",
}, },
}, },
}, },

View File

@ -79,6 +79,21 @@ could be continuous, discrete or mixed.
</Story> </Story>
</Canvas> </Canvas>
### Date Distribution
<Canvas>
<Story
name="Date Distribution"
args={{
code: "mx(10^12, 10^12 + 10^11, 10^12 + 2 * 10^11)",
width,
xAxis: "dateTime",
}}
>
{Template.bind({})}
</Story>
</Canvas>
## Mixed distributions ## Mixed distributions
<Canvas> <Canvas>