-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Introduce scriptable options (bubble chart) #4671
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| # General Chart.js Configuration | ||
| # General Configuration | ||
|
|
||
| These sections describe general configuration options that can apply elsewhere in the documentation. | ||
| These sections describe general configuration options that can apply elsewhere in the documentation. | ||
|
|
||
| * [Colors](./colors.md) defines acceptable color values | ||
| * [Font](./fonts.md) defines various font options | ||
| * [Interactions](./interactions/README.md) defines options that reflect how hovering chart elements works | ||
| * [Responsive](./responsive.md) defines responsive chart options that apply to all charts. | ||
| * [Device Pixel Ratio](./device-pixel-ratio.md) defines the ratio between display pixels and rendered pixels | ||
| * [Device Pixel Ratio](./device-pixel-ratio.md) defines the ratio between display pixels and rendered pixels. | ||
| * [Interactions](./interactions/README.md) defines options that reflect how hovering chart elements works. | ||
| * [Options](./options.md) scriptable and indexable options syntax. | ||
| * [Colors](./colors.md) defines acceptable color values. | ||
| * [Font](./fonts.md) defines various font options. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| # Options | ||
|
|
||
| ## Scriptable Options | ||
|
|
||
| Scriptable options also accept a function which is called for each data and that takes the unique argument `context` representing contextual information (see [option context](options.md#option-context)). | ||
|
|
||
| Example: | ||
|
|
||
| ```javascript | ||
| color: function(context) { | ||
| return context.data < 0 ? 'red' : // draw negative values in red | ||
| index%2 ? 'blue' : 'green'; // else, alternate values in blue and green | ||
| } | ||
| ``` | ||
|
|
||
| > **Note:** scriptable options are only supported by a few bubble chart options. | ||
|
|
||
| ## Indexable Options | ||
|
|
||
| Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a [function](#scriptable-options) is more appropriated if supported. | ||
|
|
||
| Example: | ||
|
|
||
| ```javascript | ||
| color: [ | ||
| 'red', // color for data at index 0 | ||
| 'blue', // color for data at index 1 | ||
| 'green', // color for data at index 2 | ||
| 'black', // color for data at index 3 | ||
| //... | ||
| ] | ||
| ``` | ||
|
|
||
| ## Option Context | ||
|
|
||
| The option context is used to give contextual information when resolving options and currently only applies to [scriptable options](#scriptable-options). | ||
|
|
||
| The context object contains the following properties: | ||
|
|
||
| - `chart`: the associated chart | ||
| - `dataIndex`: index of the current data | ||
| - `dataset`: dataset at index `datasetIndex` | ||
| - `datasetIndex`: index of the current dataset | ||
|
|
||
| **Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I initially implemented scriptable options as a function taking 2 arguments: an
indexand thecontext(see the datalabels plugin) -indexbeing the dataset index if the option is resolved for a dataset element (line of a line chart) or the data index if the option is for a data element (point of a line chart).Having the index as first argument would allow to integrate with external functions (e.g. returning a color for a given index (
return index % size)). After discussing with @etimberg, we agreed to remove that first argument and keep only thecontext.Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To illustrate my previous message: let's say a third party library provides the following function:
Then, if
indexis provided, it's easy to plug an option to that function:Instead of:
However, not sure how this use case is common or will work as-is most of the time, and having this first
indexargument might be burden later if we realize it's more confusing than helpful. So I thinkfunction(context)is better, just want to be sure we are all on the same page.