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,
xAxis = "number",
} = props;
console.log({ plot });
const [sized] = useSize((size) => {
const shapes = flattenResult(
plot.distributions.map((x) =>

View File

@ -51,6 +51,8 @@ export interface SquiggleChartProps {
minX?: number;
/** Specify the upper bound of the x scale */
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 */
distributionChartActions?: boolean;
enableLocalSettings?: boolean;
@ -79,6 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
maxX,
color,
title,
xAxis = "number",
distributionChartActions,
enableLocalSettings = false,
}) => {
@ -100,6 +103,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
maxX,
color,
title,
xAxis,
actions: distributionChartActions,
};

View File

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