SquiggleChart accepts a height, and doesn't have a hover, because it was broken for mixed distributions
This commit is contained in:
parent
4d0a522e96
commit
d5c183e7ee
|
@ -43,6 +43,7 @@ export interface SquiggleChartProps {
|
|||
onEnvChange?(env: exportEnv): void;
|
||||
/** CSS width of the element */
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
|
@ -57,6 +58,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
environment = [],
|
||||
onEnvChange = () => {},
|
||||
width = 500,
|
||||
height = 60,
|
||||
}: SquiggleChartProps) => {
|
||||
let samplingInputs: SamplingInputs = {
|
||||
sampleCount: sampleCount,
|
||||
|
@ -92,6 +94,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
return (
|
||||
<SquiggleVegaChart
|
||||
width={width}
|
||||
height={height}
|
||||
data={{ con: values }}
|
||||
actions={false}
|
||||
/>
|
||||
|
|
|
@ -55,6 +55,7 @@ let SquigglePlayground: FC<Props> = (props) => {
|
|||
diagramStop={diagramStop}
|
||||
diagramCount={diagramCount}
|
||||
pointDistLength={pointDistLength}
|
||||
height={150}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"$schema": "https://vega.github.io/schema/vega/v5.json",
|
||||
"description": "A basic area chart example.",
|
||||
"description": "A basic area chart example",
|
||||
"width": 500,
|
||||
"height": 200,
|
||||
"height": 100,
|
||||
"padding": 5,
|
||||
"data": [
|
||||
{
|
||||
|
@ -13,17 +13,6 @@
|
|||
}
|
||||
],
|
||||
"signals": [
|
||||
{
|
||||
"name": "mousex",
|
||||
"description": "x position of mouse",
|
||||
"update": "0",
|
||||
"on": [
|
||||
{
|
||||
"events": "mousemove",
|
||||
"update": "1-x()/width"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "xscale",
|
||||
"description": "The transform of the x scale",
|
||||
|
@ -93,6 +82,9 @@
|
|||
{
|
||||
"orient": "bottom",
|
||||
"scale": "xscale",
|
||||
"labelColor": "#666",
|
||||
"tickColor": "#ddd",
|
||||
"format": "~s",
|
||||
"tickCount": 20
|
||||
}
|
||||
],
|
||||
|
@ -103,11 +95,6 @@
|
|||
"data": "con"
|
||||
},
|
||||
"encode": {
|
||||
"enter": {
|
||||
"tooltip": {
|
||||
"signal": "datum.cdf"
|
||||
}
|
||||
},
|
||||
"update": {
|
||||
"x": {
|
||||
"scale": "xscale",
|
||||
|
@ -122,8 +109,7 @@
|
|||
"value": 0
|
||||
},
|
||||
"fill": {
|
||||
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
|
||||
"color": "#000"
|
||||
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#4C78A8'}] }"
|
||||
},
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
|
@ -186,6 +172,9 @@
|
|||
"y": {
|
||||
"scale": "yscale",
|
||||
"field": "y"
|
||||
},
|
||||
"fill": {
|
||||
"value": "#1e4577"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user