williaster / data-ui Goto Github PK

View Code? Open in Web Editor NEW

536.0 536.0 68.0 75.75 MB

A collection of data-rich UI components 📈

Home Page: https://williaster.github.io/data-ui/

License: MIT License

JavaScript 99.74% HTML 0.12% CSS 0.13%

data-ui's People

Contributors

Stargazers

Watchers

data-ui's Issues

X / Y axis center

Hi, I was wondering if there is a quick way to position the X/Y Axis in the center of the graph (or in different positions based on dynamic median)?

This is essentially what i am trying to achieve...

Dual Line / Bar Series

@williaster - was wondering if something like this is possible right now?

http://bl.ocks.org/d3noob/e34791a32a54e015f57d

any plan to support brush?

@williaster I have one case of great mount of data to show, it's not possible to show all the data in the chart, and may be brushChart is a solution。

so， do you have any plan to support the brush chart?

thanks for the great work done for visualization。

Histogram can't handle single-bin data

I'm attempting to make a crossfilter-esque dashboard and part of that involves using the histograms. They're great, except when I filter my data to include only one bin's worth of data (e.g. reducing data to one category, apples, out of ['apples', 'oranges', 'bananas']). At this point I get an error: Cannot read property 'bin0' of undefined. I'm assuming it's attempting to calculate bins on the category for which apples is a part of, but comes up with only one bin, hence problems. Is there a simple workaround for this?

Rotate <XAxis /> tick lables

Hi, this is a pretty simple issue but I can't seem to figure out how to rotate x axis tick labels.

What I am trying to do is essentially add

.attr("transform", "rotate(-90)")

to the text element of the x axis label.

I see there is tickLabelComponent prop of <XAxis /> but I cannot seem to get it to work.

Thanks

Request: pie with a sector for selection

Hi.

not really have any immediate use-case :-) but, below pie is beautiful.
Would like to see how to do it on top of vx.

http://recharts.org/#/en-US/examples/CustomActiveShapePieChart
http://jsfiddle.net/ro31mjuf/

thanks.
bsr.

make `XYChart` + `withTooltip` support `onFocus` and `onBlur` for accessibility

[xy-chart] add circle packing constraint to keep circles within the width of the chart

Polish of brush component

Complete documentation
Move low level <Brush /> and <Drag /> to @vx
Allow programable brushing
Better handle resizing

add tooltips to chart packages

this depends on the @vx story for tooltips landing #44

add animation support to charts

this depends on the vx story for animations and interactions landing airbnb/visx#6

fix parsing of `PropType` types in storybook Prop table tab

all data-ui + vx proptypes show as other in the storybook:

this likely has to do with prop type functions being stripped during babel parsing / some build issue. may need to restructure the repo to fix it. may not be fixable for @vx issues

console error when clicking on bars in Firefox

To reproduce, open this link in Firefox, open developer tools and click on the bars.

The following error will appear:

TypeError: Value being assigned to SVGPoint.x is not a finite floating-point value.

Chrome doesn't report this error.

Seems it's due to the fact that when the focus event is fired, clientX and clientY are both undefined: https://github.com/hshoff/vx/blob/master/packages/vx-event/src/localPoint.js#L32.

add histogram series

add support for snapping tooltips to values

use absolute imports for `vx` components, update builds to support absolute imports for `data-ui` components

currently we import components from vx via import { MyComponent } from '@vx/package' which means bundles will include the entire vx package we are importing from. this could be improved with absolute imports import MyComponent from @vx/package/build/....

similarly we only build an index for each @data-ui package which means users get the entire package when they import a single component. this could be improved by exporting the entire build directory to support absolute imports for @data-ui components.

How to handle click in a Histogram BarSeries?

I tried putting an onClick handler in the BarSeries within the Histogram, and on the Histogram, no luck. Is this possible?

            <Histogram
            ariaLabel="My histogram of ..."
            orientation="vertical"
            width={380}
            height={280}
            cumulative={false}
            normalized
            binCount={this.state.numBins}
            valueAccessor={datum => datum.overallPercentile}
            binType="numeric"
            renderTooltip={({ event, datum, data, color }) => (
                <div style={{'left': '15px', top: '15px'}}>
                    <strong style={{ color }}>{datum.bin0} to {datum.bin1}</strong>
                    <div><strong>count </strong>{datum.count}</div>
                    <div><strong>cumulative </strong>{datum.cumulative}</div>
                    <div><strong>density </strong>{datum.density}</div>
                </div>
            )}
            >
            <BarSeries
                animated
                rawData={this.state.candidateList /* or binnedData={...} */}
                onClick={(e) => console.log('bar clicked ' + e)}
            />
            <XAxis />
            <YAxis />
            </Histogram>

[histogram] add support for rotated axis labels

add `@data-ui/shared` `withTooltip` to match `WithTooltip`

how to support biaxial Line/Bar chart?

Hello @williaster

I have looked around, i have checked the docs, I can't still figure out how to do a biaxial line chart. I have added the axisRight, but it is possible to use different key for that axis ?
I am looking for something that Left Axis is the line chart for 1 value and the Right Axis is a line for other type of value.

the example I wish to achieve is like this:

https://antv.alipay.com/zh-cn/g2/3.x/demo/other/double-axes.html

Thank you.

TypeError: Cannot read property 'bandwidth' of null

Histogram Density Series Component is giving the Error. The Error is getting generated in Production Build only not in Development mode. Hence, Histogram is not getting rendered.

TypeError: Cannot read property 'bandwidth' of null
at o (DensitySeries.js:134)
at f._constructComponentWithoutOwner (ReactCompositeComponent.js:306)
at f._constructComponent (ReactCompositeComponent.js:282)
at f.mountComponent (ReactCompositeComponent.js:185)
at Object.mountComponent (ReactReconciler.js:43)
at v.mountChildren (ReactMultiChild.js:234)
at v._createInitialChildren (ReactDOMComponent.js:701)
at v.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at f.performInitialMount (ReactCompositeComponent.js:368)

beemo fails while bootstrapping lerna

Cannot set up the project: after a fresh clone of the repo (master, release 0.75) and npm install, during lerna bootstrap I get the following error:

> @data-ui/[email protected] prepublish /Users/a.trevisan/projects/data-ui/packages/data-table
> yarn run build

yarn run v1.13.0
$ yarn run build:cjs && yarn run build:esm
$ beemo babel ./src --out-dir lib/ --react --minify
beemo babel

Transpile files with Babel

Options:
  --version      Show version number                                   [boolean]
  --config       Path to a configuration file             [string] [default: ""]
  --debug        Show debug messages                  [boolean] [default: false]
  --locale       Locale to display output in              [string] [default: ""]
  --output       Control output size (1-3)                 [number] [default: 3]
  --silent       Hide all output                      [boolean] [default: false]
  --theme        Change output colors              [string] [default: "default"]
  --help         Show help                                             [boolean]
  --clean        Clean the target folder              [boolean] [default: false]
  --concurrency  Number of builds to run in parallel                    [number]
  --priority     Prioritize workspace builds based on dependency graph [boolean]
  --workspaces   Run command in each workspace (supports regex)         [string]

Error: Unknown fields: driver.
    at buildAndCheck (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/optimal/lib/optimal.js:48:13)
    at Object.optimal [as default] (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/optimal/lib/optimal.js:68:10)
    at new Routine (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@boost/core/lib/Routine.js:40:41)
    at new CreateConfigRoutine (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@beemo/core/lib/configure/CreateConfigRoutine.js:25:1)
    at names.reverse.map.driver (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@beemo/core/lib/ConfigureRoutine.js:29:29)
    at Array.map (<anonymous>)
    at ConfigureRoutine.setupConfigFiles (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@beemo/core/lib/ConfigureRoutine.js:28:59)
    at ConfigureRoutine.bootstrap (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@beemo/core/lib/ConfigureRoutine.js:16:14)
    at ConfigureRoutine.configure (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@boost/core/lib/Routine.js:67:14)
    at Pipeline.pipe (/Users/a.trevisan/projects/data-ui/packages/data-table/node_modules/@boost/core/lib/Routine.js:122:40)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna info lifecycle @data-ui/[email protected]~prepublish: Failed to exec prepublish script

factor out theme into its own package

support function- and element-type `renderTooltip` prop in `@data-ui/shared` `WithTooltip`

Brush

I was attempting to bring <Brush /> into a dashboard i'm working on that uses vx, however I wasn't able to do so successfully. Is there any recommendations on how to do so or can you spot what I may be doing wrong here:

<Brush
  width={props.width}
  height={props.height}
  top={0}
  left={0}
  xScale={xScale}
  yScale={yScale}
  handleSize={4}
  resizeTriggerAreas={["left", "right", "top", "bottom"]}
  brushDirection={"both"}
  onChange={handleBrushChange}
  onBrushEnd={d => {
    console.log("D:", d);
    return d;
  }}
  xAxisOrientation="left"
  yAxisOrientation="bottom"
  brushRegion={"chart"}
  selectedBoxStyle={{
    fill: "url(#brush_pattern)",
    stroke: "#DDD"
  }}
  ref={brush}
/>

The problem I would run into is that the component would render, but if I pan I can't see the selected area, however I do see the crosshairs from the component. I'm not quite sure what I'm doing wrong here. Our visualization is a Gantt that has a bunch of implementations details that is more difficult to rework but here is an example codepen from one of the vx examples that I made to show whats going on:
https://codesandbox.io/s/7m10yk3251

add detailed docs for event-flow

Code breaks in production when component names are mangled

isSeries, for example, checks the child's component name, but when building for production, it breaks.

The default behavior of the 'build' command in create-react-app is to mangle the code that includes the components names.

EDIT:
No, my bad - I had that because I used AnimatedBarSeries directly instead of BarSeries.
This is what you get for not following the docs.

Set minimum bar length for BarSeries

When there is one large data point in the bar series, all the other bars would be reduced to nothing. In that case it's impossible to hover over them to show tooltips or click on the bars.

Is it possible to set a minimum bar length for the BarSeries (maybe via adding a minBarLength prop)?

add radial chart

Warning in BarSeries & DensitySeries when displaying object arrays

Thanks for your hard work on this component! It looks great and has proven super useful for my project.

I'm displaying a histogram using a BarSeries and a DensitySeries, based on the example:

https://williaster.github.io/data-ui/?selectedKind=histogram&selectedStory=normal&full=0&addons=0&stories=1&panelRight=0

The data I pass to the rawData prop of each component is an array of objects, and I'm using the valueAccessor property on the histogram component to specify how to get the data for rendering. This works great, but it causes warnings to be generated in the the console log:

Warning: Failed prop type: Invalid prop rawData[0] supplied to DensitySeries.

In summary, the functionality works great but the warnings in the console are suboptimal.

add `@data-ui/progress-bar` package

XY-chart is not working correctly when passing time-series data

I'm building the AreaSeries - band chart using data-ui/xy-chart.

I've passed the data:
[
{ x: new Date(), y: 10, y0: 5, y1: 15},
...
]

and xScale={{ type: 'time' }}

But the x-axis values are not generated correctly in xy-chart.
It seems that they only catch the value of date, like the format "YYYYMMDD" and ignore the time value.

Please check the issue and let me know the solution

Support For Line Series in Histogram

Hi Team,

Could you please let me know how to Integrate Line Series Component in Histogram.

Please find the attached file for reference.

Thanks

Upgrading from 0.0.69 to 0.0.71 leads to `yarn check` errors

I've been using version 0.0.69 of histogram and xy-chart for a little while now. When I tried to upgrade to version 0.0.71 this morning, I started getting yarn check errors immediately:

$ yarn check
yarn check v1.12.3
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
error "@data-ui/histogram##@vx/curve@^0.0.165" doesn't satisfy found match of "@data-ui\\histogram#@vx\\[email protected]"
error "@data-ui/histogram##@vx/shape@^0.0.179" doesn't satisfy found match of "@data-ui\\histogram#@vx\\[email protected]"
warning "@data-ui/xy-chart##@vx/axis@^0.0.168" could be deduped from "0.0.168" to "@vx\\[email protected]"
warning "@data-ui/xy-chart##@vx/glyph@^0.0.165" could be deduped from "0.0.165" to "@vx\\[email protected]"
warning "@data-ui/xy-chart##@vx/gradient@^0.0.165" could be deduped from "0.0.165" to "@vx\\[email protected]"
warning "@data-ui/xy-chart##@vx/pattern@^0.0.165" could be deduped from "0.0.165" to "@vx\\[email protected]"
warning "@data-ui/xy-chart##@vx/responsive@^0.0.165" could be deduped from "0.0.165" to "@vx\\[email protected]"
warning "recompose#@babel/runtime@^7.0.0" could be deduped from "7.1.5" to "@babel\\[email protected]"
error "@data-ui/histogram#@vx/event##@vx/[email protected]" doesn't satisfy found match of "@data-ui\\histogram#@vx\\point@0
.0.136"
warning "webpack-dev-server#sockjs-client#url-parse@^1.1.8" could be deduped from "1.4.4" to "[email protected]"
error "@data-ui/xy-chart#@vx/axis##@vx/[email protected]" doesn't satisfy found match of "@vx\\axis#@vx\\[email protected]"
error "@data-ui/xy-chart#@vx/axis##@vx/[email protected]" doesn't satisfy found match of "@vx\\axis#@vx\\[email protected]"
error "@data-ui/histogram#@vx/axis##@vx/[email protected]" doesn't satisfy found match of "@data-ui\\histogram#@vx\\point@0.
0.136"
error "@data-ui/histogram#@vx/axis##@vx/[email protected]" doesn't satisfy found match of "@data-ui\\histogram#@vx\\shape@0.
0.140"
error "@data-ui/histogram#@vx/tooltip##@vx/[email protected]" doesn't satisfy found match of "@data-ui\\histogram#@vx\\boun
[email protected]"
warning "react-redux#hoist-non-react-statics#react-is@^16.3.2" could be deduped from "16.6.3" to "react-redux#react-is@1
6.6.3"
error "@vx/axis#@vx/shape##@vx/[email protected]" doesn't satisfy found match of "@vx\\axis#@vx\\[email protected]"
error "@vx/axis#@vx/shape##@vx/[email protected]" doesn't satisfy found match of "@vx\\axis#@vx\\[email protected]"
error "@vx/axis#@vx/shape##@vx/[email protected]" doesn't satisfy found match of "@vx\\axis#@vx\\[email protected]"
warning "@storybook/react#webpack#uglifyjs-webpack-plugin##webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0" cou
ld be deduped from "3.12.0" to "@storybook\\react#[email protected]"
warning "eventsource#original#url-parse@^1.4.3" could be deduped from "1.4.4" to "[email protected]"
info Found 10 warnings.
error Found 11 errors.

[xy-chart][tooltip] support finding closest data points without voronoi

this will also enable multiple series values in tooltips

add @data-ui/histogram package

Build from source not working

Hi there,

I attempted a couple of builds from source (as instructed, npm install, lerna bootstrap). These however seem to fail at a variety of versions (tested master at a0165e0, 0.69 at 0840a3b ).

Errors vary, at master it is:

$lerna bootstrap


info cli using local version of lerna
lerna notice cli v3.11.1
lerna notice filter excluding "build-config"
lerna info filter [ '!build-config' ]
lerna info Bootstrapping 11 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna info lifecycle @data-ui/[email protected]~prepublish: @data-ui/[email protected]
lerna info lifecycle @data-ui/[email protected]~prepublish: @data-ui/[email protected]
lerna info lifecycle @data-ui/[email protected]~prepublish: @data-ui/[email protected]

> @data-ui/[email protected] prepublish /Users/someone/snip/data-ui/packages/data-table
> yarn run build

yarn run v1.13.0
$ yarn run build:cjs && yarn run build:esm
$ beemo babel ./src --out-dir lib/ --react --minify

Unknown blueprint for "configure". Must be a builder.
    at /Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/node_modules/optimal/lib/optimal.js:32:13
    at Array.forEach (<anonymous>)
    at buildAndCheck (/Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/node_modules/optimal/lib/optimal.js:23:26)
    at Object.optimal [as default] (/Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/node_modules/optimal/lib/optimal.js:64:10)
    at ConfigLoader.loadConfig (/Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/lib/ConfigLoader.js:201:41)
    at Tool.loadConfig (/Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/lib/Tool.js:417:41)
    at Tool.initialize (/Users/someone/snip/data-ui/packages/data-table/node_modules/@boost/core/lib/Tool.js:302:14)
    at new Beemo (/Users/someone/snip/data-ui/packages/data-table/node_modules/@beemo/core/lib/Beemo.js:42:62)
    at Object.<anonymous> (/Users/someone/snip/data-ui/packages/data-table/node_modules/@beemo/cli/lib/CLI.js:21:15)
    at Module._compile (internal/modules/cjs/loader.js:734:30)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

at 0.69

> beemo babel ./src --out-dir lib/ --minify


Invalid BabelDriver field "clean.alias". String cannot be empty.
    at StringBuilder.invariant (/Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/Builder.js:175:15)
    at StringBuilder.checkNotEmpty (/Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/StringBuilder.js:103:16)
    at /Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/Builder.js:293:55
    at Array.forEach (<anonymous>)
    at StringBuilder.runChecks (/Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/Builder.js:290:21)
    at /Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/UnionBuilder.js:85:21
    at Array.forEach (<anonymous>)
    at UnionBuilder.checkUnions (/Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/UnionBuilder.js:82:18)
    at /Users/someone/snip/data-ui/packages/data-ui-theme/node_modules/optimal/lib/Builder.js:293:55
    at Array.forEach (<anonymous>)

$lerna --version
3.11.1

Could you please help me out? Thanks!

fix babel parsing for superset build

the build for apache/superset#3102 is failing due to some issue with babel parsing.

Existing project integration

Hi, great library! I was wondering what would be the recommended way to integrate the components into an existing project?

add better docs for xychart

LineSeries ordinal

Hi there,

I've been trying for a (long) while but i can't figure out how to make an ordinal LineSeries - chart with String 'x' values. It seems to be unable to determine where its ticks should be; even when using numbers fo the 'x' value. Playing around with the numTicks properties and such all result in the same. Is this package capable of rendering a LineSeries?

data

[
        { x: 'car', y: 1 },
        { x: 'plane', y: 2 },
        { x: 'new york', y: 3 },
        { x: 'ocean', y: 4 },
        { x: 'pencil', y: 5 },
      ]

<XYChart
    height={height}
    width={width}
    xScale={{ type: 'ordinal' }}
    yScale={{ type: 'linear' }}
  >
    <LineSeries
      data={[
        { x: 'car', y: 1 },
        { x: 'plane', y: 2 },
        { x: 'new york', y: 3 },
        { x: 'ocean', y: 4 },
        { x: 'pencil', y: 5 },
      ]}
    />
    <XAxis />
    <YAxis />
  </XYChart>

add @data-ui/sparkline package

Working on react native?

Is there a version for react native?

StackedBarChart negative values

react-dom.development.js:2912 Error: <rect> attribute height: A negative value is not valid. ("-3.8790836274461924")

Cannot seem to have y values that are negative in bar charts. Is this expected? I was hoping to be able to do something like this https://www.highcharts.com/demo/column-negative

Question about data format of eventflow

Hi,
I think event flow is very interesting, so I want to test event flow using my dataset.
I checked format of sampleEvents of eventflow demo, and I created my example like as follows.
But the flows are not grouped like sampleEvents.
Could you give me advice?

{"allEvents" : [{
	"EVENT_ID": "user0",
	"EVENT_NAME": "I10",
	"TS": "2016-01-06 00:00:00"
}, {
	"EVENT_ID": "user0",
	"EVENT_NAME": "I10",
	"TS": "2016-01-26 00:00:00"
}, {
	"EVENT_ID": "user0",
	"EVENT_NAME": "K05",
	"TS": "2016-01-28 00:00:00"
}, {
	"EVENT_ID": "user0",
	"EVENT_NAME": "I69",
	"TS": "2016-01-28 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "I10",
	"TS": "2016-01-07 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "K05",
	"TS": "2016-02-02 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "I10",
	"TS": "2016-02-26 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "I10",
	"TS": "2016-05-04 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "K05",
	"TS": "2016-05-18 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "I10",
	"TS": "2016-07-06 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "F00",
	"TS": "2016-07-12 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "F00",
	"TS": "2016-08-03 00:00:00"
}, {
	"EVENT_ID": "user2",
	"EVENT_NAME": "F00",
	"TS": "2016-09-06 00:00:00"
}]
}

add event flow visualization

Histogram renders incorrectly if the data is entirely zeroes and ones

This might actually be a more general issue of calculating the domain, but I'll leave the problem statement more specific for now.

Here's a sandbox: https://codesandbox.io/s/3rqvwxo42p

Two issues:

The second bin (the one containing all the ones) is missing entirely.
The density for the first bin is calculated incorrectly, as can be seen in the height of the bar and the value in the tooltip.

Update to React 16 and Enzyme 3

React 16 and Enzyme 3 have been released and VX has been updated to support React 16. It would be great for data-ui to support React 16 as well.

Unexplainable tooltip offset in XY-Chart when orientation of YAxis is set to `left`.

It might be a bug, but I've been wrapping my head around this for a couple of hours now. Once I put the Y-Axis on the left side, the tooltip is no longer in sync with the position of the mouse.

It seems to be caused by the orientation-prop of the YAxis.

    <YAxis label="GPTW RPM" orientation='left' numTicks={8}/>

Full

  <XYChart
      margin= {{top: 10, left: 60, right: 10, bottom: 40 }}
      width={props.parentWidth}
      height={props.height}
      showYGrid
      showXGrid
      xScale={{ type: 'time' }}
      yScale={{ type: 'linear' }}
      renderTooltip={({ event, datum, data, color }) => {
       const monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
       ];
       const month = monthNames[datum.x.getMonth()];
       return (
         <div>
           <strong style={{ color }}>{datum.label}</strong>
           <div><strong>Month: </strong>{month} {datum.x.getYear() + 1900}</div>
         </div>
       );
      }}
      snapTooltipToDataX
    >
    <HorizontalReferenceLine
      reference={1}
      stroke='#000000'
      strokeWidth={1}
      strokeDasharray='3 3'
      dashType='dotted'
      strokeLinecap='butt'
      label="House average"
      labelProps={{ width: 100, verticalAnchor: 'middle', dx: 5, dy: -10}}
    />

    <XAxis label="Time" />
    <YAxis label="GPTW RPM" orientation='left' numTicks={8}/>
     <CrossHair showHorizontalLine={false} fullHeight stroke="pink" />
  </XYChart>

Any help is appreciated!

williaster / data-ui Goto Github PK

data-ui's People

Contributors

Stargazers

Watchers

Forkers

data-ui's Issues

Recommend Projects

Recommend Topics

Recommend Org