Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@datawheel/canon-vizbuilder
Advanced tools
A canon plugin to explore visualizations of data from OLAP cubes.
Install the package from npm:
npm i @datawheel/canon-vizbuilder --save
Import it to your page:
import Vizbuilder from "@datawheel/canon-vizbuilder";
The minimal requirement for Vizbuilder is a mondrian-rest server URL. To insert Vizbuilder in a page, you have to import the component and set it inside a page:
import Vizbuilder from "@datawheel/canon-vizbuilder";
class MyPage extends React.PureComponent {
...
render() {
return (
<section>
<Vizbuilder src="https://your.mondrian-rest.server" />
</section>
);
}
...
}
export default MyPage
Vizbuilder's state is managed from the site-wide redux state, so is a requirement to setup the Vizbuilder's reducer function.
In app/reducers/index.js
, import the reducer function and assign it to the vizbuilder
key:
import {vbStateReducer} from "@datawheel/canon-vizbuilder";
...
export default {
...
vizbuilder: vbStateReducer,
...
};
Most of these properties are only processed during the construction of the Vizbuilder component, and changing them on further stages of their lifecycle won't have any effect.
Property | Type | Required? | Default value | Description |
---|---|---|---|---|
src | string , string[] | ✓ | A mondrian-rest server URL, or an array of mondrian-rest server URLs. | |
config | D3plusConfigObject | {} | A d3plus chart config object. This object is combined and passed to all charts displayed by Vizbuilder. See the Chart configuration section for details. | |
datacap | number | 20000 | The amount of data points Vizbuilder should be allowed to handle as a result of a query. A value too high could freeze the browser. | |
defaultGroup | string[] | An array with names of the Level that should be selected by default after a Measure is selected. The order of the strings determines which Level will be picked first. | ||
defaultMeasure | string | The name of the measure that should be loaded when Vizbuilder is rendered for the first time. | ||
formatting | {[x: string], (d: number) => string} | {} | An object, whose keys are Measure.annotations.units_of_measurement names, and their values are functions that accept a number argument and return an string with the formatted value. There's a list of default formatters, but if there's no match, d3plus-format.formatAbbreviate is used instead. | |
instanceKey | string | "vizbuilder" | In case the site has more than one instance of Vizbuilder (like a full view + a map mode view), the instances must have a instanceKey to reset the general state and not have interference between views. See Multiple instances for details. | |
measureConfig | {[x: string], D3plusConfigObject} | An object, whose keys are Measure names, and their values are d3plus chart config objects. These are specific configurations for each Measure, and take priority over the configurations set in the config property. | ||
multipliers | {[x: string], number} | {} | An object, whose keys are Measure.annotations.units_of_measurement names, and their values are numbers. These are used in Filters for conversion of the input value to the real value represented and backwards. See Issue #325 for details. | |
onChange | (query: VbQuery, uiParams VbUIParams, charts: VbChart[]) => void | () => void | A hook function called afted the internal State is modified. Useful to work with features outside of Vizbuilder's scope. The parameters this function receives must be considered as READ-ONLY objects; modifying them could have uncertain consequencies. | |
permalink | boolean | true | The switch that enables or disables permalinks on the current instance. See Using Permalinks for details. | |
permalinkKeywords | {[x: string], string} | An object to configure the parameter names to parse from/to the URL.search string. See Using Permalinks for details. | ||
toolbar | JSX.Element | A component to render just above the chart area. Can be used to put a custom toolbar inside the Vizbuilder. See Styling for a reference of the position. | ||
topojson | {[x: string], D3plusTopojsonConfigObject} | {} | An object, whose keys are Geographic Level names, and their values are d3plus chart config objects, restricted to topojson-related properties. These are only applied on geomap charts. See Chart configuration for details. | |
visualizations | string[] | ["geomap", "treemap", "barchart", "lineplot", "barchartyear", "stacked"] | An array of the type of charts allowed to be rendered. There's some changes to the Vizbuilder internal working if this array only contains "geomap" , see Map-only mode for details. |
Additionally, Vizbuilder accepts childrens. These will be rendered between the Filter Manager and the Ranking, on the Sidebar area. See Styling for a quick reference.
D3plusConfigObject
: {[x: string]: any}
For this object, x
must be a valid key to define a configuration property in a d3plus chart. See the d3plus documentation for further reference.D3plusTopojsonConfigObject
: {[x: string]: any}
The same as with D3plusConfigObject
, but in this case, x
should only be topojson-related properties. Some examples are topojson
(required, the URL to the topojson file), topojsonId
(the key that relates each topojson shape with the dataset value), and topojsonKey
(the key in the topojson file for the shapes to use). See the d3plus documentation on Geomaps for further reference.VbQuery
: {[x: string]: any}
The main query state for the Vizbuilder. This is the basic state from where all queries are calculated.VbUIParams
: {[x: string]: any}
User interface parameters on Vizbuilder. Currently contains activeChart
(the identification key for the currently enlarged chart), selectedTime
(the currently selected Year for charts that can't show a timespan), and showConfidenceInt
(a boolean indicating if charts should visually present confidence intervals/margins of error).VbChart
: {[x: string]: any}
The list of charts currently rendered in Vizbuilder. Each object contains the specific query (a specific expansion of the VbQuery object), the dataset shown, and the extra properties used to create each chart.The configuration objects are split in different properties to apply them according to the specific situation. The final configuration object that will be passed to each d3plus chart component is generated from a combination of these objects in this order:
VbChart.query
.topojson[geolevel.name]
.config
.measureConfig[measure.name]
.All these are combined using d3plus-common.assign
, so the combination is deep, and each object overrides the properties set by the previous one.
Permalinks are enabled by default. To disable them, you must set the permalink
property to false
.
You could also disable the internal permalinks and use the onChange
hook to setup your own implementation.
Keyword | Format | Example | Description |
---|---|---|---|
enlarged | [VbChart.type] -[VbChart.key] | treemap-z9TnC | Defines if a chart should be zoomed in when it finishes loading. |
filters | [order] -[Filter.measure.key] -[Filter.operator] -[Filter.value] | 0-1qWfo-1-1 | Determines the filters that should be set. Can be set multiple times in the permalink. |
groups | [order] -[Grouping.level.key] -[Grouping.member.key]? ~[Grouping.member.key]? | 0-z9TnC-04000US08~04000US09 | Determines the groupings that should be set. Can be set multiple times in the permalink. |
measure | [Measure.annotations.key] | 1qWfo | Determines which measure should be selected on the first load. |
Following the examples in the table, a permalink should look like this:
https://data.site/vizbuilder?enlarged=treemap-z9TnC&filters=0-1qWfo-1-1&groups=0-z9TnC-04000US08~04000US09&groups=1-1cDpEA&measure=1qWfo
To define your own structure, pass an object like this one to the permalinkKeywords
property:
{
"enlarged": "show",
"filters": "f",
"groups": "g",
"measure": "m"
}
This would change the previous permalink to:
https://data.site/vizbuilder?show=treemap-z9TnC&f=0-1qWfo-1-1&g=0-z9TnC-04000US08~04000US09&g=1-1cDpEA&m=1qWfo
To prevent reliability issues, the permalinkKeywords
property is only incorporated
during the construction of the Vizbuilder component, and any further attempt to
change its properties will have no effect.
Setting the visualizations
property to ["geomap"]
has the following effects on the Vizbuilder:
.mapmode
className.topojson
configuration.topojson
configuration.This is also a initialization-dependent property.
In case there are more than one instance of Vizbuilder working on the site, they must have an instanceKey
attribute. This attribute is used to clear the state between changes in navigation, since the state is stored and controlled on redux. Without this, on initialization the instance would see the stored state and express it on the UI.
<Vizbuilder
src={...}
...
instanceKey="map"
...
/>
The styling included in Vizbuilder is minimal, but the skeleton has some predefined sizings. It's preset to have a height of 100vh, a sidebar of 300px, a chart space that uses the remaining space with a minimal width of 400px; both areas set to have automatic scrollbars if their content is taller than the window height, and so on. To facilitate the styling of the different parts of the interface, there are some useful classnames tied to the structure:
.vizbuilder[.loading]
[`components/Loading.jsx` is rendered here, but only shown during `.vizbuilder.loading`]
.area-sidebar
.wrapper
.control.measure-manager
.control.grouping-manager
.control.filter-manager
[`this.props.children` are rendered here, is suggested they have the `.control` className]
.control.ranking
.control.sources
.area-chart
.wrapper.toolbar
[`this.props.toolbar` is rendered here]
.wrapper.chart-wrapper[.multi/.single][.unique]
[.chart-card for each chart]
.wrapper
.viz
footer
FAQs
A canon plugin to explore visualizations of data from OLAP cubes.
The npm package @datawheel/canon-vizbuilder receives a total of 8 weekly downloads. As such, @datawheel/canon-vizbuilder popularity was classified as not popular.
We found that @datawheel/canon-vizbuilder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.