storybook for date distribution, grab missing things necessary for date distribution in spec
This commit is contained in:
parent
0292c66c80
commit
496bd0e539
|
@ -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) =>
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
@ -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') : ''",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user