Plug and play React charts

Last update: Nov 12, 2022

Overview

Orama [DEPRECATED]

This package has been deprecated as it is no longer used by Kensho internally and we do not plan to continue maintaining it. We hope it can serve as inspiration for other data visualization libraries!

Plug and play React charts.

Responsive layout
Automatic data type extraction
Freely composable marks
Canvas rendering and caching optimizations
Configurable theme

Orama has been powering Kensho's charts in production for more than a year.

/horáō, "to see, spiritually and mentally" – a vision, focusing on the impact it has on the one beholding the vision.

Quick Start

$ npm install orama

Get an array of objects: [{key1, key2}, {key1, key2}, ...], or array of arrays for multi-lines and multi-areas.
Choose which marks to use: , , , , etc.
Choose which keys in the data map to which visual dimensions: x, y, fill, stroke, etc.

) ">

import {Chart, Lines} from 'orama'

const data = [
  {date: new Date('2010-01-01'), value: 10},
  {date: new Date('2010-02-01'), value: 17},
  {date: new Date('2010-03-01'), value: 9},
  {date: new Date('2010-04-01'), value: 12},
  {date: new Date('2010-05-01'), value: 20},
]

const chart = (
  <Chart>
    <Lines data={data} x="date" y="value" />
  </Chart>
)

API

Orama charts are all wrapped by the tag, inside of which you can freely compose visual marks. The available marks are: , , , , , and .

The data for each mark can be an array of objects [{}, {}] or an array of arrays of objects [ [{}, {}], [{}, {}] ]. You can use arrays of arrays to get multi-lines or multi-areas in the and marks. Values in the objects can be Numbers, Strings or Dates

Each key from the data objects can be mapped to a visual dimension on the marks. The available visual dimensions are: x, x0, x1, x2, y, y0, y1, y2, radius, fill, stroke, lineWidth, lineDash, alpha, text, textAlign, xOffset, and yOffset. Not all dimensions are available in all marks.

To map the values from the key date in the data objects to the x position of a mark, you can do:

) ">

import {Chart, Points} from 'orama'

const data = [
  {date: new Date('2010-01-01')},
  {date: new Date('2010-02-01')},
  {date: new Date('2010-03-01')},
]

const chart = (
  <Chart>
    <Points data={data} x="date" />
  </Chart>
)

The values' types are automatically extracted from the data, and the data domain for each visual dimension is calculated using all marks inside of a chart. If a chart has both and using the x dimension, the domain of the x dimension will be calculated using the data in both marks.

Most of the props accepted by the components follow a schema that combines the dimension name with a specific property. For example, to manually set the axis name for the x dimension you can pass the prop: xName="custom name", to set the fill dimension to a constant value (instead of mapping from the data) you can use the prop: fillValue="steelblue".

Throughout this documentation, we will refer to this use of dimension + property as [dim]PropertyName. All dimensions can be configured this way.

The dimension props can also be set specifically for during hover behavior, by adding hover before the name of the prop: hover[Dim]PropertyName.

The chart component can be configured with the following properties:

Prop	Description
`width`	Number Sets the width of the chart, if this property is not used the chart gets the dimension from its parent.
`proportion`	Number = 0.5 The height of the chart is calculated by multiplying the `width` by the `proportion` value. If `height` is defined, this value is ignored.
`height`	Number If height is not defined, its value is calculated by multiplying the `width` the `proportion`. If `height` is defined, the `proportion` is ignored.
`margin`	Object Overrides the margins of the chart. The margins are automatically calculated so that the axis labels can fit inside of the chart.
`theme`	Object = DEFAULT_THEME Customizes the theme of the chart. See the theme object schema
`[dim]Name`	String The name to be used for the dimension axis label and tooltip. Defaults to the accessor key.
`[dim]ZeroBased`	boolean = false Sets if the domain of the dimension should include zero.
`[dim]Type`	String Overrides the type of the dimension. Accepted values are: `linear`, `ordinal`, `time` and `log`.
`[dim]Domain`	Array Overrides the domain of the dimension.
`[dim]Range`	Array Overrides the range of the dimension.
`[dim]Nice`	boolean = false If sets to `true` extends the domain of dimension to nice round values.
`[dim]ShowTicks`	boolean = true Show or hide the axis ticks for the dimension.
`[dim]ShowGuides`	boolean = true Show or hide the axis guides for the dimension.
`[dim]ShowLabel`	boolean = true Show or hide the axis label for the dimension.
`[dim]TickSpace`	Number Overrides the sugested space between axis ticks. For numbers and dates, the tick count on the axis is calculated by dividing the size of the axis by the `[dim]TickSpace` prop. For strings, all values become ticks on the axis, since there's no way to select a representative subset of them on a timeline. The tickSpace defaults to `50` for the `x` dimension and `40` for the `y` dimension.
`[dim]TickCount`	Number Overrides the number of ticks used on the axis of the dimension. For axes with datatypes string of number, the `[dim]TickCount` is automatically calculated by dividing the size of the axis by the `[dim]TickSpace` prop. For strings, all values become ticks on the axis, since there's no way to select a representative subset of them on a timeline.
`[dim]TickFormat`	Function Overrides the function used to format the values of the dimension on the axis and tooltip. `Math.round(d)}/>`
`[dim]TickOffset`	Number Overrides the distance between the tick text and the axis.
`[dim]LabelOffset`	Number Overrides the distance between the axis label text and the axis.

Configuring the Tooltip

The tooltip can be configured by passing additional props to the Chart. You can also provide your own React component to be displayed as the tooltip.

Prop	Description
`Tooltip`	React Component Override the tooltip component.
`tooltipExtraDimensions`	Array<{accessor: string, name: string, format: function}> Add extra dimensions to the tooltip. You can also pass an array of strings if you plan to use the default name and formatters.
`[dim]TooltipFormat`	function Override the value formatter for the specified key.
`tooltipShowKeys`	boolean = false Show or hide the keys row on the tooltip.

Marks

Marks can be freely composed inside of the . Orama offers the following marks components: , , , , , and .

Each mark needs a data input and at least one dimension accessor defined. The input data for the mark can be an array of objects or an array of arrays of objects, the latter denoting grouped data such as multi-lines or multi-areas. Accepted values for the data objects are: Number, String, and Date.

Configuring Marks

The available visual dimensions that can be used to map data values to the marks are: x, x0, x1, x2, y, y0, y1, y2, radius, fill, stroke, lineWidth, lineDash, alpha, text, textAlign, xOffset, and yOffset. Not all dimensions are available in all marks, see below for the specific dimensions supported by each mark.

All marks can be configured with the following props:

Prop	Description
`data`	Array The input data for the mark component, see above for what format is accepted.
`[dim]`	String Sets the key data accessor for the specified dimension.
`[dim]Value`	Any A constant to be used for the dimension.
`showHover`	boolean = true Sets the tooltip hover behaviour for the mark.

Mark for drawing lines or multi-lines. To draw multi-lines, use an array of arrays as the data input.

It accepts the following dimensions: x, y, fill, stroke, lineWidth, lineDash and alpha.

) ">

import {Chart, Lines} from 'orama'

const data = [
  [
    {date: new Date('2010-01-01'), value: 10, name: 'A'},
    {date: new Date('2010-02-01'), value: 17, name: 'A'},
    {date: new Date('2010-03-01'), value: 9, name: 'A'},
  ],
  [
    {date: new Date('2010-01-01'), value: 16, name: 'B'},
    {date: new Date('2010-02-01'), value: 13, name: 'B'},
    {date: new Date('2010-03-01'), value: 15, name: 'B'},
  ],
]

const chart = (
  <Chart>
    <Lines data={data} x="date" y="value" stroke="name" />
  </Chart>
)

Mark for drawing areas on the charts.

It accepts the following dimensions: x, x0, y, y0, radius, fill, stroke, lineWidth, lineDash and alpha.

To map the lower bound of the area to the data, use the x0 or y0 accessors.

) ">

import {Chart, Areas} from 'orama'

const data = [
  {date: new Date('2010-01-01'), value: 10},
  {date: new Date('2010-02-01'), value: 17},
  {date: new Date('2010-03-01'), value: 3},
]

const chart = (
  <Chart yZeroBased>
    <Areas data={data} x="date" y="value" />
  </Chart>
)

Mark for drawing circles on the charts.

It accepts the following dimensions: x, y, radius, fill, stroke, lineWidth, lineDash and alpha.

) ">

import {Chart, Points} from 'orama'

const data = [
  {value1: 16, value2: 10, size: 1},
  {value1: 13, value2: 17, size: 5},
  {value1: 15, value2: 14, size: 10},
]

const chart = (
  <Chart>
    <Points data={data} x="value1" y="value2" radius="size" />
  </Chart>
)

Mark for drawing bars on the charts.

It accepts the following dimensions: x, x1, x2, y, y1, y2, fill, stroke, lineWidth, lineDash and alpha.

You can define the exact start and end of the bars by using the x1, x2, y1 and y2 dimensions.

) ">

import {Chart, Bars} from 'orama'

const data = [
  {type: 'type 1', value: 10},
  {type: 'type 2', value: 20},
  {type: 'type 3', value: -7},
]

const chart = (
  <Chart yZeroBased>
    <Bars data={data} x="type" y="value" />
  </Chart>
)

Mark for drawing vertical or horizontal guides on the charts.

It accepts the following dimensions: x, y, stroke, lineWidth, lineDash and alpha.

) ">

import {Chart, Guides} from 'orama'

const data = [{x: 1}, {x: 5}, {x: 8}, {x: 10}, {y: 1}, {y: 5}, {y: 8}, {y: 10}]

const chart = (
  <Chart yZeroBased>
    <Guides data={data} x="x" y="y" strokeValue="steelblue" lineDashValue={[5, 5]} />
  </Chart>
)

Mark for drawing vertical or horizontal ranges on the charts.

It accepts the following dimensions: x1, x2, y1, y2, fill, stroke, lineWidth, lineDash and alpha.

) ">

import {Chart, Ranges} from 'orama'

const data = [
  {start: 1, end: 5},
  {start: 10, end: 20},
  {start: 40, end: 50},
  {start: 60, end: 80},
]

const chart = (
  <Chart>
    <Ranges data={data} x1="start" x2="end" y1="start" y2="end" fillValue="lightgray" />
  </Chart>
)

Mark for text on the charts.

It accepts the following dimensions: x, y, alpha, text, textAlign, xOffset and yOffset.

) ">

import {Chart, Points, Text} from 'orama'

const data = [
  {date: new Date('2010-01-01'), value: 10, letter: 'A'},
  {date: new Date('2010-02-01'), value: 17, letter: 'B'},
  {date: new Date('2010-03-01'), value: 9, letter: 'C'},
]

const chart = (
  <Chart>
    <Points data={data} x="date" y="value" />
    <Text
      data={data}
      x="date"
      y="value"
      text="letter"
      fillValue="white"
      textAlignValue="center"
      yOffsetValue={5}
    />
  </Chart>
)

Theme configuration

The theme can be configured by passing a theme prop to the component, which will be merged with the default theme.

) ">

import {Chart, Points} from 'orama'

const data = [
  {date: new Date('2010-01-01'), value: 10},
  {date: new Date('2010-02-01'), value: 17},
  {date: new Date('2010-03-01'), value: 9},
  {date: new Date('2010-04-01'), value: 12},
  {date: new Date('2010-05-01'), value: 10},
]

const theme = {
  textFill: 'white',
  backgroundFill: 'black',
  plotBackgroundFill: 'hsl(0, 0%, 20%)',
  guideStroke: 'hsl(0, 0%, 30%)',
  guideZeroStroke: 'hsl(0, 0%, 55%)',
  plotFill: 'white',
}

const chart = (
  <Chart theme={theme}>
    <Points data={data} x="date" y="value" />
  </Chart>
)

Acknowledgment

Made with ♥ by Luis Carli

This library is heavily influenced by the work of Mike Bostock, Hadley Wickham, and many other academics and practitioners from the data visualization community.

License

Licensed under the Apache 2.0 License. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Comments

Add default kensho eslint config and --fix errors

Ignores every rule not auto-fixed to leave this PR clean(er) than if we were to start fixing errors.

I can make future PRs that clean up the ignored rules.

Closes: #31 //cc @billyjanitsch

opened by nabeel- 3
Tooltip offset from position

I've encountered a problem but I'm still trying to reproduce it outside my app. My chart is inside several containers with fixed > absolute positions. It's tooltip is being offset by the chart's relative parent 'left' position. I tried studying the TooltipWrapper component but couldn't figure the problem that easily. I'll continue trying to reproduce the problem in codesandbox.io and place the link here when I'm done.

opened by georgesboris 3
Refactor enhancers

Rename stateHOC to withControlledState and chartWidthHOC to withComputedWidth and move them both to an enhancers/ folder. Also significantly simplify the former.

I need to test this internally to make sure I haven't broken anything, so please don't merge yet.

~This should also land after #87 since it would otherwise break Highlight.~

opened by billyjanitsch 2
Remove use of function constructor

Generally it's not good practice to call the Function constructor. Like eval, it's a fragile operation with many associated security vulnerabilities, and there is usually a better solution.

https://github.com/kensho-technologies/orama/blob/520d5b47be9156e0e56de703507d4fbf63d81dc5/src/dataHelpers.js#L15

We should figure out why we're calling the constructor here, and come up with a better solution.

opened by billyjanitsch 2
Enable onEvent bindings?

I wish I would be able to take an action when the user hovers or clicks a data point. However I did not found anything in the docs on how to do this. Is this available? Is there any design issues on enabling this?

My use case is this: I have an area chart that I wish I would display additional information when the user hovers a data point. I understand there is the tooltip component but the information would be better displayed in a larger and fixed container. (The container will display the details of the last hovered/clicked even when the user leaves the chart.)

And congratulations again on this library Luis. I was using chart.js since I had no available time to study d3.js properly. But I quickly found myself trying to compose different chart types and with this library this is a complete breeze. Thanks!

opened by georgesboris 2
Bump js-yaml from 3.12.0 to 3.13.1
Bumps js-yaml from 3.12.0 to 3.13.1.

Changelog

Sourced from js-yaml's changelog.

[3.13.1] - 2019-04-05

Security

Fix possible code execution in (already unsafe) .load(), #480.

[3.13.0] - 2019-03-20

Security

Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

[3.12.2] - 2019-02-26

Fixed

Fix noArrayIndent option for root level, #468.

[3.12.1] - 2019-01-05

Added

Added noArrayIndent option, #432.

Commits

665aadd 3.13.1 released

da8ecf2 Browser files rebuild

b2f9e88 Merge pull request #480 from nodeca/toString

e18afbf Fix possible code execution in (already unsafe) load()

9d4ce5e 3.13.0 released

f64c673 Browser files rebuild

a567ef3 Restrict data types for object keys

59b6e76 Fix test name

e4267fc 3.12.2 released

7231a49 Browser files rebuild

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump eslint-utils from 1.3.1 to 1.4.3
Bumps eslint-utils from 1.3.1 to 1.4.3.

Commits

23f4ddc 🔖 1.4.3

8f9e481 🐛 fix reference tracker false positive

6633278 ⚒ fix test scripts

7c8e67c ⚒ fix build scripts

41ff95e ⚒ update dependencies

4942012 ⚒ fix build scripts

f1c8d02 ⚒ update build scripts

a88598a Create FUNDING.yml

4e1bc07 1.4.2

e4cb014 🐛 add null test

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump mixin-deep from 1.3.1 to 1.3.2
Bumps mixin-deep from 1.3.1 to 1.3.2.

Commits

754f0c2 1.3.2

90ee1fa ensure keys are valid when mixing in values

See full diff in compare view

Maintainer changes

This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump lodash from 4.17.11 to 4.17.13
Bumps lodash from 4.17.11 to 4.17.13.

Commits

e371828 Bump to v4.17.13.

357e899 Rebuild lodash and docs.

fd9a062 Bump to v4.17.12.

e77d681 Rebuild lodash and docs.

629d186 Update OpenJS references.

2406eac Fix minified build.

17a34bc Fix test bootstrap for core build.

53838a3 Fix tests in older browsers.

29e2584 Fix style:test lint nits.

8f4d3eb Update deps.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Update dependencies to enable Greenkeeper 🌴
Let’s get started with automated dependency management for orama :muscle:

⚠️ Greenkeeper has found a package-lock.json file in this repository. Please use greenkeeper-lockfile to make sure this gets updated as well.

This pull request updates all your dependencies to their latest version. Having them all up to date really is the best starting point for keeping up with new releases. Greenkeeper will look out for further dependency updates and make sure to handle them in isolation and in real-time, but only after you merge this pull request.

Important: Greenkeeper will only start watching this repository’s dependency updates after you merge this initial pull request.

💥 Tests on this branch are failing. Here’s how to proceed.

To solve the issue, first find out which of the dependency’s updates is causing the problem. Then fix your code to accomodate the changes in the updated dependency. next-update is a really handy tool to help you with this.

Then push your changes to this branch and merge it.

🏷 How to check the status of this repository

Greenkeeper adds a badge to your README which indicates the status of this repository.

This is what your badge looks like right now :point_right:

🙈 How to ignore certain dependencies

You may have good reasons for not wanting to update to a certain dependency right now. In this case, you can change the dependency’s version string in the package.json file back to whatever you prefer.

To make sure Greenkeeper doesn’t nag you again on the next update, add a greenkeeper.ignore field to your package.json, containing a list of dependencies you don’t want to update.

// package.json { … "greenkeeper": { "ignore": [ "package-names", "you-want-me-to-ignore" ] } }

👩‍💻 How to update this pull request

# Change into your repository’s directory git fetch git checkout greenkeeper/initial npm install-test # Adapt your code until everything works again git commit -m 'chore: adapt code to updated dependencies' git push origin greenkeeper/initial

✨ How do dependency updates work with Greenkeeper?

After you merge this pull request, Greenkeeper will create a new branch whenever a dependency is updated, with the new version applied. The branch creation should trigger your testing services and check whether your code still works with the new dependency version. Depending on the the results of these tests Greenkeeper will try to open meaningful and helpful pull requests and issues, so your dependencies remain working and up-to-date.

- "underscore": "^1.6.0" + "underscore": "^1.7.0"

The above example shows an in-range update. 1.7.0 is included in the old ^1.6.0 range, because of the caret ^ character. When the test services report success Greenkeeper will silently delete the branch again, because no action needs to be taken – everything is fine.

However, should the tests fail, Greenkeeper will create an issue to inform you about the problem immediately.

This way, you’ll never be surprised by a dependency breaking your code. As long as everything still works, Greenkeeper will stay out of your way, and as soon as something goes wrong, you’ll be the first to know.

- "lodash": "^3.0.0" + "lodash": "^4.0.0"

In this example, the new version 4.0.0 is not included in the old ^3.0.0 range. For version updates like these – let’s call them “out of range” updates – you’ll receive a pull request.

This means that you no longer need to check for new versions manually – Greenkeeper will keep you up to date automatically.

These pull requests not only serve as reminders to update: If you have solid tests and good coverage, and the pull requests passes those tests, you can very likely just merge it and release a new version of your software straight away :shipit:

To get a better idea of which ranges apply to which releases, check out the extremely useful semver calculator provided by npm.

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Good luck with your project and see you soon :sparkles:

Your Greenkeeper bot :palm_tree:
greenkeeper
opened by greenkeeper[bot] 1
Scale dimension tooltip values correctly

This issue ended up conflating two different issues.

The first is that by default we do not show the keys row on the tooltip. This causes dimensions we use the same data key accessor for to show up multiple times in the tooltip. For example, if we have a component <Foo x=“bar” y=“baz” fill=“baz” /> then our tooltip will show baz twice, first for they key and the second for fill key. This can be remedied by including the tooltipShowKeys prop which will give you the key along with the accessor key and datum value.

The second issue is that we return a [dim]TickCount of 0 for all dimensions except x and y.

When we later format the tooltip value for other dimensions, we apply a tickFormat(0) to the dimensions scale, which does not accurately reflect the scaled value we display in the chart. The solution is to only apply the tickFormat to scales where we have a tickCount.

I only added the tooltipShowKeys prop to a few examples but we can add it to others if we see the need to clarify the tooltip.

Closes #135

opened by nabeel- 1
Compute data hover using voronoi diagram

Profiling the stress test in #123, I noticed that 40% of each frame is spent calling isPointInStroke to compute which datum the mouse is hovering over. (This use of isPointInStroke is also the only reason that orama requires a polyfill to support IE 11, AFAIK.)

Instead of this canvas-based approach, we could collapse all data into a voronoi diagram, and use it to determine the closest datum to a given mouse position, which would be relatively instantaneous. Here's an example of that approach.

(This would change the existing hover behavior, arguably for the better.)
performance

opened by billyjanitsch 0
Re-enable remaining lint rules
[x] no-nested-ternary

[x] no-param-reassign

[x] no-shadow

[x] no-underscore-dangle

[x] react/forbid-prop-types

[x] react/no-access-state-in-setstate

[ ] react/no-deprecated

[ ] react/no-unused-prop-types

[x] react/no-unused-state

[x] react/sort-comp
opened by billyjanitsch 0
Prefer native methods over Lodash where possible

For the sake of reducing bundle size.

Unlike our internal code, we shouldn't assume a shimmed ES2015 environment in orama, so let's stick to ES5 methods for now.

opened by billyjanitsch 0

Releases(v2.0.6)

v2.0.6(Aug 31, 2018)

Now that Babel 7 has been released, this release upgrades the dependent version of @babel/runtime to ^7.0.0.
Source code(tar.gz)
Source code(zip)
v2.0.5(Aug 15, 2018)

This release simply upgrades the dependent version of @babel/runtime to 7.0.0-rc.1.
Source code(tar.gz)
Source code(zip)
v2.0.4(Jun 28, 2018)

This release reimplements tooltip performance improvements (#143) in a backwards-compatible way. It also removes some unused code.
Source code(tar.gz)
Source code(zip)
v2.0.3(Jun 28, 2018)

This release reverts the tooltip performance improvements (#143) released in 2.0.1 because they caused an unintentionally-breaking change when using a custom tooltip component.
Source code(tar.gz)
Source code(zip)
v2.0.2(Jun 18, 2018)
This release fixes two regressions in the 2.x series.

Fixes

Default to a transparent chart background fill

Handle undefined children passed to <Chart>

Source code(tar.gz)
Source code(zip)
v2.0.1(Jun 15, 2018)

This release contains more internal refactoring and performance improvements, particularly for tooltips.
Source code(tar.gz)
Source code(zip)
v2.0.0(Jun 8, 2018)
This release reduces orama's package size, improves tree-shakeability, and improves performance. It contains some breaking changes in the form of a slimmed public API, but does not change core behavior at all. See the full changelog for details.

Breaking changes

Remove undocumented internals from the public API (utils, chartCore, DEFAULT_THEME, etc.)

Remove undocumented Highlight extension

Remove undocumented image renderer

Drop support for React < 16.3.0

Features

Improve performance of tooltips while hovering over data

Validate theme objects passed to charts

Refactor and optimize the entire codebase

Modernize and simplify render output

Scale charts based on pixel density of the display

Avoid an initial re-render of charts with computed widths

Fixes

Avoid erroneously trimming the first datum in Areas layers

Fix x-axis label incorrectly displaying y-dimension data

Fix brush offset behavior while exiting and re-entering bounds

Source code(tar.gz)
Source code(zip)
v2.0.0-alpha.1(Jun 7, 2018)
Fixes

Prevent brushes from crashing when dragged out of and then back into their bounds

Source code(tar.gz)
Source code(zip)
v2.0.0-alpha.0(Jun 6, 2018)
This release reduces orama's package size, improves tree-shakeability, and improves performance. It contains some breaking changes in the form of a slimmed public API, but does not change core behavior at all. See the full changelog for details.

Breaking changes

Remove undocumented internals from the public API (utils, chartCore, DEFAULT_THEME, etc.)

Remove undocumented Highlight extension

Remove undocumented image renderer

Drop support for React < 16.3.0

Features

Improve performance of tooltips while hovering over data

Validate theme objects passed to charts

Refactor and optimize the entire codebase

Modernize and simplify render output

Scale charts based on pixel density of the display

Fixes

Avoid erroneously trimming the first datum in Areas layers

Source code(tar.gz)
Source code(zip)
v1.5.1(Jun 1, 2018)

This release primarily contains internal refactoring and cleanup, resulting in a smaller published build. It also contains minor performance improvements.
Source code(tar.gz)
Source code(zip)
v1.5.0(Jun 1, 2018)
This release primarily contains internal improvements to the build pipeline.

Features

Publish an ES module build alongside the standard CJS one. It will automatically be loaded by ESM-aware bundlers like webpack.

Set {"sideEffects": false} in package.json to allow recent versions of webpack to tree-shake the library more aggressively.

Source code(tar.gz)
Source code(zip)
v1.4.4(Mar 7, 2018)
Fix issue with removing tooltips in IE11 (#17).

Source code(tar.gz)
Source code(zip)
v1.4.2(Dec 13, 2017)

Source code(tar.gz)
Source code(zip)
v1.4.0(Aug 11, 2017)
(FTR) Show breaks in lines and areas when values are null (#11 @jhhayashi)

Source code(tar.gz)
Source code(zip)
v1.3.0(Aug 2, 2017)
(FTR) Fit check and shift text layers to ensure they are not cut off (thanks @nabeel-)

Source code(tar.gz)
Source code(zip)
v1.2.2(Jun 1, 2017)
Fixed <Brush/> bug when running the code after a name mangling minification (thanks @billyjanitsch and @jhhayashi )

Source code(tar.gz)
Source code(zip)
v1.2.1(May 19, 2017)
Fix <or.Brush/> children handling (thanks @jhhayashi)

Source code(tar.gz)
Source code(zip)
v1.2.0(May 12, 2017)
Open-source release.

Revamped build process

Use prop-types module

Clean-up dependencies

Remove uses of React.createClass

Update default style

Source code(tar.gz)
Source code(zip)