docs/scriptappy.json
{ "scriptappy": "1.0.0", "info": { "name": "picasso.js", "description": "A charting library streamlined for building visualizations for the Qlik Sense Analytics platform.", "version": "2.8.1", "license": "MIT", "stability": "stable", "x-qlik-visibility": "public" }, "entries": { "picassojs": { "description": "picasso.js entry point", "kind": "function", "params": [ { "name": "cfg", "optional": true, "kind": "object", "entries": { "renderer": { "optional": true, "kind": "object", "entries": { "prio": { "kind": "array", "items": { "type": "string" } } } }, "logger": { "optional": true, "kind": "object", "entries": { "level": { "kind": "union", "items": [ { "kind": "literal", "value": 0 }, { "kind": "literal", "value": 1 }, { "kind": "literal", "value": 2 }, { "kind": "literal", "value": 3 }, { "kind": "literal", "value": 4 } ], "type": "number" } } }, "style": { "optional": true, "type": "object" }, "palettes": { "optional": true, "kind": "array", "items": { "type": "object" } } } } ], "returns": { "type": "#/entries/picassojs" }, "examples": [ "import picasso from 'picasso.js';\n\nconst configuredPicasso = picasso({ renderer: { prio: ['canvas'] } }) // All components will render using the canvas renderer" ], "entries": { "chart": { "kind": "function", "params": [ { "name": "definition", "type": "#/definitions/ChartDefinition" } ], "returns": { "type": "#/definitions/Chart" }, "examples": [ "picasso.chart({\n element: document.querySelector('#container'), // This is the element to render the chart in\n data: [\n {\n type: 'matrix',\n data: [\n ['Month', 'Sales', 'Margin'],\n ['Jan', 1106, 7],\n ['Feb', 5444, 53],\n ['Mar', 147, 64],\n ['Apr', 7499, 47],\n ['May', 430, 62],\n ['June', 9735, 13],\n ['July', 5832, 13],\n ['Aug', 7435, 15],\n ['Sep', 3467, 35],\n ['Oct', 3554, 78],\n ['Nov', 5633, 23],\n ['Dec', 6354, 63],\n ],\n },\n ],\n settings: {\n scales: {\n x: { data: { field: 'Margin' } },\n y: { data: { field: 'Sales' } },\n },\n components: [\n {\n // specify how to render the chart\n type: 'axis',\n scale: 'y',\n layout: {\n dock: 'left',\n },\n },\n {\n type: 'axis',\n scale: 'x',\n layout: {\n dock: 'bottom',\n },\n },\n {\n type: 'point',\n data: {\n extract: {\n field: 'Month',\n props: {\n x: { field: 'Margin' },\n y: { field: 'Sales' },\n },\n },\n },\n settings: {\n x: { scale: 'x' },\n y: { scale: 'y' },\n size: function () {\n return Math.random();\n },\n },\n },\n ],\n },\n });" ] }, "component": { "description": "Component registry", "type": "#/definitions/registry" }, "data": { "description": "Data registry", "type": "#/definitions/registry" }, "formatter": { "description": "Formatter registry", "type": "#/definitions/registry" }, "interaction": { "description": "Interaction registry", "type": "#/definitions/registry" }, "renderer": { "description": "Renderer registry", "type": "#/definitions/registry", "examples": [ "const svgFactory = picassojs.renderer('svg');\nconst svgRenderer = svgFactory();" ] }, "scale": { "description": "Scale registry", "type": "#/definitions/registry" }, "use": { "description": "Plugin registry", "kind": "function", "params": [ { "name": "plugin", "type": "#/definitions/plugin" }, { "name": "options", "optional": true, "type": "object" } ] }, "version": { "description": "picasso.js version", "type": "string" } } } }, "definitions": { "ArcSettings": { "kind": "object", "entries": { "startAngle": { "description": "Start of arc line, in radians", "type": "number" }, "endAngle": { "description": "End of arc line, in radians", "type": "number" }, "radius": { "description": "Radius of arc line", "type": "number" } } }, "Brush": { "description": "A brush context", "kind": "interface", "params": [], "entries": { "addAndRemoveValues": { "description": "Add and remove values in a single operation\nalmost the same as calling addValues and removeValues but only triggers one 'update' event\n\nIf the state of the brush changes, an 'update' event is emitted.", "kind": "function", "params": [ { "name": "addItems", "description": "Items to add", "kind": "array", "items": { "type": "object" } }, { "name": "removeItems", "description": "Items to remove", "kind": "array", "items": { "type": "object" } } ] }, "addKeyAlias": { "description": "Adds an alias to the given key", "kind": "function", "params": [ { "name": "key", "description": "Value to be replaced", "type": "string" }, { "name": "alias", "description": "Value to replace key with", "type": "string" } ], "examples": [ "brush.addKeyAlias('BadFieldName', 'Region');\nbrush.addValue('BadFieldName', 'Sweden'); // 'BadFieldName' will be stored as 'Region'\nbrush.containsValue('Region', 'Sweden'); // true\nbrush.containsValue('BadFieldName', 'Sweden'); // true" ] }, "addRange": { "description": "Adds a numeric range to this brush context", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the range", "type": "string" }, { "name": "range", "description": "The range to add to this brush", "kind": "object", "entries": { "min": { "description": "Min value of the range", "type": "number" }, "max": { "description": "Max value of the range", "type": "number" } } } ], "examples": [ "brush.addRange('Sales', { min: 20, max: 50 });" ] }, "addRanges": { "kind": "function", "params": [ { "name": "items", "description": "Items containing the ranges to remove", "kind": "array", "items": { "entries": { "key": { "type": "string" }, "range": { "type": "object" } }, "kind": "object" } } ] }, "addValue": { "description": "Adds a primitive value to this brush context\n\nIf this brush context is not started, a 'start' event is emitted.\nIf the state of the brush changes, ie. if the added value does not already exist, an 'update' event is emitted.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "value", "description": "The value to add", "kind": "union", "items": [ { "type": "string" }, { "type": "number" } ], "type": "any" } ], "emits": [ { "type": "#/definitions/Brush/events/start" }, { "type": "#/definitions/Brush/events/update" } ], "examples": [ "brush.addValue('countries', 'Sweden');\nbrush.addValue('/qHyperCube/qDimensionInfo/0', 3);" ] }, "addValues": { "kind": "function", "params": [ { "name": "items", "description": "Items to add", "kind": "array", "items": { "type": "object" } } ] }, "brushes": { "description": "Returns all brushes within this context", "kind": "function", "params": [], "returns": { "type": "object" } }, "clear": { "description": "Clears this brush context", "kind": "function", "params": [] }, "configure": { "description": "Configure the brush instance.", "kind": "function", "params": [ { "name": "config", "type": "#/definitions/BrushConfig" } ], "examples": [ "brushInstance.configure({\n ranges: [\n { key: 'some key', includeMax: false },\n { includeMax: true, includeMin: true },\n ]\n})" ] }, "containsRange": { "description": "Checks if a range segment is contained within this brush context\n\nReturns true if the range segment exists for the provided key, returns false otherwise.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "range", "description": "The range to check for", "kind": "object", "entries": { "min": { "description": "Min value of the range", "type": "number" }, "max": { "description": "Max value of the range", "type": "number" } } } ], "returns": { "type": "boolean" }, "examples": [ "brush.addRange('Sales', { min: 10, max: 50 });\nbrush.containsRange('Sales', { min: 15, max: 20 }); // true - the range segment is fully contained within [10, 50]\nbrush.containsRange('Sales', { min: 5, max: 20 }); // false - part of the range segment is outside [10, 50]\nbrush.containsRange('Sales', { min: 30, max: 80 }); // false - part of the range segment is outside [10, 50]" ] }, "containsRangeValue": { "description": "Checks if a value is contained within a range in this brush context\n\nReturns true if the values exists for the provided key, returns false otherwise.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "value", "description": "The value to check for", "type": "number" } ], "returns": { "type": "boolean" }, "examples": [ "brush.addRange('Sales', { min: 10, max: 50 });\nbrush.containsRangeValue('Sales', 30); // true\nbrush.containsRangeValue('Sales', 5); // false" ] }, "containsValue": { "description": "Checks if a certain value exists in this brush context\n\nReturns true if the values exists for the provided key, returns false otherwise.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "value", "description": "The value to check for", "kind": "union", "items": [ { "type": "string" }, { "type": "number" } ], "type": "any" } ], "returns": { "type": "boolean" }, "examples": [ "brush.addValue('countries', 'Sweden');\nbrush.containsValue('countries', 'Sweden'); // true\nbrush.toggleValue('countries', 'Sweden'); // remove 'Sweden'\nbrush.containsValue('countries', 'Sweden'); // false" ] }, "end": { "description": "Ends this brush context\n\nEnds this brush context and emits an 'end' event if it is not already ended.", "kind": "function", "params": [ { "name": "args", "description": "arguments to be passed to 'end' listeners", "variable": true, "type": "any" } ], "emits": [ { "type": "#/definitions/Brush/events/end" } ] }, "intercept": { "description": "Adds an event interceptor", "kind": "function", "params": [ { "name": "name", "description": "Name of the event to intercept", "type": "string" }, { "name": "ic", "description": "Handler to call before event is triggered", "type": "function" } ], "examples": [ "brush.intercept('add-values', items => {\n console.log('about to add the following items', items);\n return items;\n});" ] }, "isActive": { "description": "Checks if this brush is activated\n\nReturns true if started, false otherwise", "kind": "function", "params": [], "returns": { "type": "boolean" } }, "link": { "description": "Link this brush to another brush instance.\n\nWhen linked, the `target` will receive updates whenever this brush changes.", "kind": "function", "params": [ { "name": "target", "description": "The brush instance to link to", "type": "#/definitions/Brush" } ] }, "removeAllInterceptors": { "description": "Removes all interceptors", "kind": "function", "params": [ { "name": "name", "description": "Name of the event to remove interceptors for. If not provided, removes all interceptors.", "optional": true, "type": "string" } ] }, "removeInterceptor": { "description": "Removes an interceptor", "kind": "function", "params": [ { "name": "name", "description": "Name of the event to intercept", "type": "string" }, { "name": "ic", "description": "Handler to remove", "type": "function" } ] }, "removeKeyAlias": { "description": "Removes an alias\n\nThis will only remove the key to alias mapping for new manipulations of the brush,\nno changes will be made to the current state of this brush.", "kind": "function", "params": [ { "name": "key", "description": "Value to remove as alias", "type": "string" } ], "examples": [ "brush.removeKeyAlias('BadFieldName');" ] }, "removeRange": { "description": "Removes a numeric range from this brush context", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the range", "type": "string" }, { "name": "range", "description": "The range to remove from this brush", "kind": "object", "entries": { "min": { "description": "Min value of the range", "type": "number" }, "max": { "description": "Max value of the range", "type": "number" } } } ] }, "removeRanges": { "kind": "function", "params": [ { "name": "items", "description": "Items containing the ranges to remove", "kind": "array", "items": { "type": "object" } } ] }, "removeValue": { "description": "Removes a primitive values from this brush context\n\nIf the state of the brush changes, ie. if the removed value does exist, an 'update' event is emitted.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "value", "description": "The value to remove", "kind": "union", "items": [ { "type": "string" }, { "type": "number" } ], "type": "any" } ], "examples": [ "brush.removeValue('countries', 'Sweden');" ] }, "removeValues": { "kind": "function", "params": [ { "name": "items", "description": "Items to remove", "kind": "array", "items": { "type": "object" } } ] }, "setRange": { "description": "Sets a numeric range to this brush context\n\nOverwrites any active ranges identified by `key`", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the range", "type": "string" }, { "name": "range", "description": "The range to set on this brush", "kind": "object", "entries": { "min": { "description": "Min value of the range", "type": "number" }, "max": { "description": "Max value of the range", "type": "number" } } } ] }, "setRanges": { "kind": "function", "params": [ { "name": "items", "description": "Items containing the ranges to set", "kind": "array", "items": { "type": "object" } } ] }, "setValues": { "kind": "function", "params": [ { "name": "items", "description": "Items to set", "kind": "array", "items": { "type": "object" } } ] }, "start": { "description": "Starts this brush context\n\nStarts this brush context and emits a 'start' event if it is not already started.", "kind": "function", "params": [ { "name": "args", "description": "arguments to be passed to 'start' listeners", "variable": true, "type": "any" } ], "emits": [ { "type": "#/definitions/Brush/events/start" } ] }, "toggleRange": { "description": "Toggles a numeric range in this brush context\n\nRemoves the range if it's already contained within the given identifier,\notherwise the given range is added to the brush.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the range", "type": "string" }, { "name": "range", "description": "The range to toggle in this brush", "kind": "object", "entries": { "min": { "description": "Min value of the range", "type": "number" }, "max": { "description": "Max value of the range", "type": "number" } } } ] }, "toggleRanges": { "kind": "function", "params": [ { "name": "items", "description": "Items containing the ranges to toggle", "kind": "array", "items": { "type": "object" } } ] }, "toggleValue": { "description": "Toggles a primitive value in this brush context\n\nIf the given value exists in this brush context, it will be removed. If it does not exist it will be added.", "kind": "function", "params": [ { "name": "key", "description": "An identifier that represents the data source of the value", "type": "string" }, { "name": "value", "description": "The value to toggle", "kind": "union", "items": [ { "type": "string" }, { "type": "number" } ], "type": "any" } ], "examples": [ "brush.toggleValue('countries', 'Sweden');" ] }, "toggleValues": { "kind": "function", "params": [ { "name": "items", "description": "Items to toggle", "kind": "array", "items": { "type": "object" } } ] } }, "events": { "end": { "description": "Triggered when this brush is deactivated", "kind": "event", "params": [] }, "start": { "description": "Triggered when this brush is activated", "kind": "event", "params": [] }, "update": { "description": "Triggered when this brush is updated", "kind": "event", "params": [ { "name": "added", "description": "The added items", "kind": "array", "items": { "type": "object" } }, { "name": "removed", "description": "The removed items", "kind": "array", "items": { "type": "object" } } ] } } }, "BrushConfig": { "kind": "object", "entries": { "ranges": { "description": "Range configurations", "optional": true, "kind": "array", "items": { "type": "#/definitions/BrushConfig/definitions/Ranges" } } }, "definitions": { "Ranges": { "kind": "object", "entries": { "includeMax": { "description": "Whether or not the maximum value of a range should be included when determining if a value is brushed.", "optional": true, "defaultValue": true, "type": "boolean" }, "includeMin": { "description": "Whether or not the minimum value of a range should be included when determining if a value is brushed.", "optional": true, "defaultValue": true, "type": "boolean" }, "key": { "description": "An identifier that represents the data source of the value", "optional": true, "type": "string" } } } } }, "BrushConsumeSettings": { "kind": "object", "entries": { "context": { "description": "Name of the brush context to observe", "optional": true, "type": "string" }, "data": { "description": "The mapped data properties to observe", "optional": true, "kind": "array", "items": { "type": "string" } }, "mode": { "description": "Data properties operator: and, or, xor.", "optional": true, "type": "string" }, "filter": { "description": "Filtering function", "optional": true, "type": "function" }, "style": { "description": "The style to apply to the shapes of the component", "optional": true, "kind": "object", "entries": { "active": { "description": "The style of active data points", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "any" } ] }, "inactive": { "description": "The style of inactive data points", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "any" } ] } } } }, "examples": [ "{\n context: 'selection',\n data: ['x'],\n filter: (shape) => shape.type === 'circle',\n style: {\n active: {\n fill: 'red',\n stroke: '#333',\n strokeWidth: (shape) => shape.strokeWidth * 2,\n },\n inactive: {},\n },\n}" ] }, "BrushTargetConfig": { "kind": "object", "entries": { "key": { "description": "Component key", "type": "string" }, "contexts": { "description": "Name of the brushing contexts to affect", "optional": true, "kind": "array", "items": { "type": "string" } }, "data": { "description": "The mapped data properties to add to the brush", "optional": true, "kind": "array", "items": { "type": "string" } }, "action": { "description": "Type of action to respond with", "optional": true, "defaultValue": "'set'", "type": "string" } } }, "BrushTriggerSettings": { "kind": "object", "entries": { "on": { "description": "Type of interaction to trigger brush on", "optional": true, "type": "string" }, "action": { "description": "Type of interaction to respond with", "optional": true, "type": "string" }, "contexts": { "description": "Name of the brushing contexts to affect", "optional": true, "kind": "array", "items": { "type": "string" } }, "data": { "description": "The mapped data properties to add to the brush", "optional": true, "kind": "array", "items": { "type": "string" } }, "propagation": { "description": "Control the event propagation when multiple shapes are tapped. Disabled by default", "optional": true, "type": "string" }, "globalPropagation": { "description": "Control the event propagation between components. Disabled by default", "optional": true, "type": "string" }, "touchRadius": { "description": "Extend contact area for touch events. Disabled by default", "optional": true, "type": "number" }, "mouseRadius": { "description": "Extend contact area for regular mouse events. Disabled by default", "optional": true, "type": "number" } }, "examples": [ "{\n on: 'tap',\n action: 'toggle',\n contexts: ['selection', 'tooltip'],\n data: ['x'],\n propagation: 'stop', // 'stop' => prevent trigger from propagating further than the first shape\n globalPropagation: 'stop', // 'stop' => prevent trigger of same type to be triggered on other components\n touchRadius: 24,\n mouseRadius: 10\n }" ] }, "canvasRendererFactory": { "description": "Create a new canvas renderer", "kind": "function", "params": [ { "name": "sceneFn", "description": "Scene factory", "optional": true, "type": "function" } ], "returns": { "description": "A canvas renderer instance", "type": "#/definitions/Renderer" } }, "Chart": { "description": "Chart instance", "kind": "interface", "params": [], "entries": { "brush": { "description": "Get or create brush context for this chart", "kind": "function", "params": [ { "name": "name", "description": "Name of the brush context. If no match is found, a new brush context is created and returned.", "type": "string" } ], "returns": { "type": "#/definitions/Brush" } }, "brushFromShapes": { "description": "Brush data by providing a collection of data bound shapes.", "kind": "function", "params": [ { "name": "shapes", "description": "An array of data bound shapes.", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, { "name": "config", "description": "Options", "kind": "object", "entries": { "components": { "description": "Array of components to include in the lookup", "kind": "array", "items": { "type": "#/definitions/BrushTargetConfig" } } } } ], "examples": [ "const shapes = chartInstance.shapesAt(...);\nconst config = {\n components:[\n {\n key: 'key1',\n contexts: ['myContext'],\n data: [''],\n action: 'add'\n }\n ]\n};\nchartInstance.brushFromShapes(shapes, config);" ] }, "component": { "description": "Get a component context", "kind": "function", "params": [ { "name": "key", "description": "Component key", "type": "string" } ], "returns": { "description": "Component context", "type": "#/definitions/Component" } }, "componentsFromPoint": { "description": "Get components overlapping a point.", "kind": "function", "params": [ { "name": "p", "description": "Point with x- and y-coordinate. The coordinate is relative to the browser viewport.", "type": "#/definitions/Point" } ], "returns": { "description": "Array of component contexts", "kind": "array", "items": { "type": "#/definitions/Component" } } }, "dataset": { "description": "Get", "kind": "function", "params": [ { "name": "key", "description": "Get the dataset identified by `key`", "type": "string" } ], "returns": { "type": "#/definitions/Dataset" } }, "destroy": { "description": "Destroy the chart instance.", "kind": "function", "params": [] }, "findShapes": { "description": "Get all nodes matching the provided selector", "kind": "function", "params": [ { "name": "selector", "description": "CSS selector [type, attribute, universal, class]", "type": "string" } ], "returns": { "description": "Array of objects containing matching nodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, "examples": [ "chart.findShapes('Circle') // [<CircleNode>, <CircleNode>]\nchart.findShapes('Circle[fill=\"red\"][stroke!=\"black\"]') // [CircleNode, CircleNode]\nchart.findShapes('Container Rect') // [Rect, Rect]" ] }, "formatter": { "description": "Get or create a formatter for this chart", "kind": "function", "params": [ { "name": "v", "description": "Formatter reference or formatter options", "kind": "union", "items": [ { "type": "string" }, { "type": "object" } ], "type": "any" } ], "returns": { "type": "#/definitions/formatter" }, "examples": [ "instance.formatter('nameOfMyFormatter'); // Fetch an existing formatter by name\ninstance.formatter({ formatter: 'nameOfMyFormatter' }); // Fetch an existing formatter by name\ninstance.formatter({ type: 'q' }); // Fetch an existing formatter by type\ninstance.formatter({\n formatter: 'd3',\n type: 'number',\n format: '1.0.%'\n}); // Create a new formatter" ] }, "formatters": { "description": "Get all registered formatters", "kind": "function", "params": [], "returns": { "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/formatter" } ] } }, "getAffectedShapes": { "description": "Get all shapes associated with the provided context", "kind": "function", "params": [ { "name": "context", "description": "The brush context", "type": "string" }, { "name": "mode", "description": "Property comparison mode.", "type": "string" }, { "name": "props", "description": "Which specific data properties to compare", "kind": "array", "items": { "type": "string" } }, { "name": "key", "description": "Which component to get shapes from. Default gives shapes from all components.", "type": "string" } ], "returns": { "description": "Array of objects containing shape and parent element", "kind": "array", "items": { "type": "object" } } }, "interactions": { "description": "Get all interaction instances", "kind": "object", "entries": { "instances": { "kind": "array", "items": { "type": "#/definitions/Interaction" } }, "off": { "description": "Disable all interaction instances", "kind": "function", "params": [] }, "on": { "description": "Enable all interaction instances", "kind": "function", "params": [] } }, "examples": [ "chart.interactions.instances; // Array of all interaction instances\nchart.interactions.on(); // Toggle on all interactions instances\nchart.interactions.off(); // Toggle off all interactions instances" ] }, "layoutComponents": { "description": "Layout the chart with new settings and / or data", "stability": "experimental", "kind": "function", "params": [ { "name": "def", "description": "New chart definition", "optional": true, "kind": "object", "entries": { "data": { "description": "Chart data", "optional": true, "kind": "union", "items": [ { "kind": "array", "items": { "type": "#/definitions/DataSource" } }, { "type": "#/definitions/DataSource" } ], "type": "any" }, "settings": { "description": "Chart settings", "optional": true, "type": "#/definitions/ChartSettings" }, "excludeFromUpdate": { "description": "Keys of components to not include in the layout", "optional": true, "defaultValue": "[]", "kind": "array", "items": { "type": "string" } } } } ] }, "scale": { "description": "Get or create a scale for this chart", "kind": "function", "params": [ { "name": "v", "description": "Scale reference or scale options", "kind": "union", "items": [ { "type": "string" }, { "type": "object" } ], "type": "any" } ], "returns": { "type": "#/definitions/Scale" }, "examples": [ "instance.scale('nameOfMyScale'); // Fetch an existing scale by name\ninstance.scale({ scale: 'nameOfMyScale' }); // Fetch an existing scale by name\ninstance.scale({ source: '0/1', type: 'linear' }); // Create a new scale" ] }, "scales": { "description": "Get all registered scales", "kind": "function", "params": [], "returns": { "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/Scale" } ] } }, "shapesAt": { "description": "Get all nodes colliding with a geometrical shape (circle, line, rectangle, point, polygon, geopolygon).\n\nThe input shape is identified based on the geometrical attributes in the following order: circle => line => rectangle => point => polygon => geopolygon.\nNote that not all nodes on a scene have collision detection enabled.", "kind": "function", "params": [ { "name": "shape", "description": "A geometrical shape. Coordinates are relative to the top-left corner of the chart instance container.", "kind": "union", "items": [ { "type": "#/definitions/Line" }, { "type": "#/definitions/Rect" }, { "type": "#/definitions/Point" }, { "type": "#/definitions/Circle" } ], "type": "any" }, { "name": "opts", "description": "Options", "kind": "object", "entries": { "components": { "description": "Array of components to include in the lookup. If no components are specified, all components will be included.", "optional": true, "kind": "array", "items": { "entries": { "component": { "kind": "object", "entries": { "key": { "description": "Component key", "optional": true, "type": "string" }, "propagation": { "description": "if set to `stop`, will start lookup on top visible shape and propagate downwards until a shape is found.", "optional": true, "type": "string" } } } }, "kind": "object" } }, "propagation": { "description": "if set to `stop`, will start lookup on top visible component and propagate downwards until a component has at least a match.", "optional": true, "type": "string" } } } ], "returns": { "description": "Array of objects containing colliding nodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, "examples": [ "chart.shapesAt(\n {\n x: 0,\n y: 0,\n width: 100,\n height: 100\n },\n {\n components: [\n { key: 'key1', propagation: 'stop' },\n { key: 'key2' }\n ],\n propagation: 'stop'\n }\n);" ] }, "toggleBrushing": { "kind": "function", "params": [ { "name": "val", "description": "Toggle brushing on or off. If value is omitted, a toggle action is applied to the current state.", "optional": true, "type": "boolean" } ] }, "update": { "description": "Update the chart with new settings and / or data", "kind": "function", "params": [ { "name": "def", "description": "New chart definition", "optional": true, "kind": "object", "entries": { "data": { "description": "Chart data", "optional": true, "kind": "union", "items": [ { "kind": "array", "items": { "type": "#/definitions/DataSource" } }, { "type": "#/definitions/DataSource" } ], "type": "any" }, "settings": { "description": "Chart settings", "optional": true, "type": "#/definitions/ChartSettings" }, "partialData": { "description": "If set to true, will trigger a data update only. Meaning the layout will not be updated", "optional": true, "defaultValue": false, "type": "boolean" }, "excludeFromUpdate": { "description": "Keys of components to not include in the update", "optional": true, "defaultValue": "[]", "kind": "array", "items": { "type": "string" } } } } ] } } }, "ChartDefinition": { "kind": "object", "entries": { "beforeDestroy": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/beforeDestroy" }, "beforeMount": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/beforeMount" }, "beforeRender": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/beforeRender" }, "beforeUpdate": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/beforeUpdate" }, "created": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/created" }, "destroyed": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/destroyed" }, "mounted": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/mounted" }, "updated": { "optional": true, "type": "#/definitions/ChartDefinition/definitions/updated" }, "data": { "description": "Chart data", "kind": "union", "items": [ { "kind": "array", "items": { "type": "#/definitions/DataSource" } }, { "type": "#/definitions/DataSource" } ], "type": "any" }, "element": { "description": "Element to attach chart to", "type": "HTMLElement" }, "settings": { "description": "Chart settings", "type": "#/definitions/ChartSettings" } }, "definitions": { "beforeDestroy": { "description": "Called before the chart has been destroyed", "kind": "function", "params": [] }, "beforeMount": { "description": "Called before the chart has been mounted", "kind": "function", "params": [] }, "beforeRender": { "description": "Called before the chart has been rendered", "kind": "function", "params": [] }, "beforeUpdate": { "description": "Called before the chart has been updated", "kind": "function", "params": [] }, "created": { "description": "Called when the chart has been created", "kind": "function", "params": [] }, "destroyed": { "description": "Called after the chart has been destroyed", "kind": "function", "params": [] }, "mounted": { "description": "Called after the chart has been mounted", "kind": "function", "params": [ { "name": "element", "description": "The element the chart been mounted to", "type": "HTMLElement" } ] }, "updated": { "description": "Called after the chart has been updated", "kind": "function", "params": [] } } }, "ChartSettings": { "kind": "object", "entries": { "components": { "description": "Components", "optional": true, "kind": "array", "items": { "type": "#/definitions/ComponentTypes" } }, "scales": { "description": "Dictionary with scale definitions", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/ScaleDefinition" } ] }, "formatters": { "description": "Dictionary with formatter definitions", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/FormatterDefinition" } ] }, "strategy": { "description": "Dock layout strategy", "optional": true, "type": "#/definitions/DockLayoutSettings" }, "interactions": { "description": "Interaction handlers", "optional": true, "kind": "array", "items": { "type": "#/definitions/InteractionSettings" } }, "collections": { "description": "Collections", "optional": true, "kind": "array", "items": { "type": "#/definitions/CollectionSettings" } } } }, "Circle": { "kind": "object", "entries": { "cx": { "description": "Center x-coordinate", "type": "number" }, "cy": { "description": "Center y-coordinate", "type": "number" }, "r": { "description": "Circle radius", "type": "number" } } }, "CollectionSettings": { "kind": "interface", "entries": { "key": { "description": "Unique key for the collection", "type": "string" }, "data": { "description": "Data configuration", "type": "#/definitions/DataExtraction" } }, "examples": [ "{\n key: 'my-collection',\n data: {\n extract: [{\n source: 'Products',\n field: 'Product',\n value: d => d.name,\n label: d => `<${d.name}>`\n props: {\n year: { field: 'Year' }\n num: { field: 'Sales' }\n }\n }],\n filter: d => d.label !== 'Sneakers', // extract everything except Sneakers\n sort: (a, b) => a.label > b.label ? -1 : 1, // sort descending\n }\n}" ] }, "Component": { "description": "Component instance", "kind": "object", "entries": { "type": { "description": "Type of component", "type": "string" }, "key": { "description": "Key of the component", "type": "string" } } }, "ComponentAxis": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'axis'" }, "scale": { "description": "reference to band or linear scale", "type": "string" }, "settings": { "description": "discrete or continuous axis settings", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/ComponentAxis/definitions/DiscreteSettings" }, { "type": "#/definitions/ComponentAxis/definitions/ContinuousSettings" } ], "type": "any" } }, "examples": [ "{\n type: 'axis',\n scale: '<name-of-scale>'\n}" ], "definitions": { "ContinuousSettings": { "description": "Continuous axis settings", "kind": "object", "entries": { "arc": { "description": "Optional arc settings", "optional": true, "type": "#/definitions/ArcSettings" }, "align": { "description": "Set the anchoring point of the axis. Available options are `auto/left/right/bottom/top`. In `auto` the axis determines the best option. The options are restricted based on the axis orientation, a vertical axis may only anchor on `left` or `right`", "optional": true, "defaultValue": "auto", "type": "string" }, "labels": { "kind": "object", "entries": { "align": { "description": "Align act as a slider for the text bounding rect over the item bandwidth, given that the item have a bandwidth.", "optional": true, "defaultValue": 0.5, "type": "number" }, "filterOverlapping": { "description": "Toggle whether labels should be filtered if they are overlapping. Filtering may be applied in a non-sequential order.\nIf labels are overlapping and this setting is toggled off, the axis will automatically hide.", "optional": true, "defaultValue": true, "type": "boolean" }, "margin": { "description": "Space in pixels between the tick and label.", "optional": true, "defaultValue": 4, "type": "number" }, "maxLengthPx": { "description": "Max length of labels in pixels", "optional": true, "defaultValue": 150, "type": "number" }, "minLengthPx": { "description": "Min length of labels in pixels. Labels will always at least require this much space", "optional": true, "defaultValue": 0, "type": "number" }, "offset": { "description": "Offset in pixels along the axis direction.", "optional": true, "defaultValue": 0, "type": "number" }, "show": { "description": "Toggle labels on/off", "optional": true, "defaultValue": true, "type": "boolean" } } }, "line": { "kind": "object", "entries": { "show": { "description": "Toggle line on/off", "optional": true, "defaultValue": true, "type": "boolean" } } }, "minorTicks": { "kind": "object", "entries": { "margin": { "description": "Space in pixels between the ticks and the line.", "optional": true, "defaultValue": 0, "type": "number" }, "show": { "description": "Toggle minor-ticks on/off", "optional": true, "defaultValue": false, "type": "boolean" }, "tickSize": { "description": "Size of the ticks in pixels.", "optional": true, "defaultValue": 3, "type": "number" } } }, "paddingEnd": { "description": "Padding in direction perpendicular to the axis", "optional": true, "defaultValue": 10, "type": "number" }, "paddingStart": { "description": "Padding in direction perpendicular to the axis", "optional": true, "defaultValue": 0, "type": "number" }, "ticks": { "kind": "object", "entries": { "margin": { "description": "Space in pixels between the ticks and the line.", "optional": true, "defaultValue": 0, "type": "number" }, "show": { "description": "Toggle ticks on/off", "optional": true, "defaultValue": true, "type": "boolean" }, "tickSize": { "description": "Size of the ticks in pixels.", "optional": true, "defaultValue": 8, "type": "number" } } } }, "examples": [ "{\n type: 'axis',\n scale: '<name-of-linear-scale>',\n settings: {\n minorTicks: {\n show: false,\n },\n },\n}" ] }, "DiscreteSettings": { "description": "Discrete axis settings", "kind": "object", "entries": { "align": { "description": "Set the anchoring point of the axis. Available options are `auto/left/right/bottom/top`. In `auto` the axis determines the best option. The options are restricted based on the axis orientation, a vertical axis may only anchor on `left` or `right`", "optional": true, "defaultValue": "auto", "type": "string" }, "labels": { "kind": "object", "entries": { "align": { "description": "Align act as a slider for the text bounding rect over the item bandwidth, given that the item have a bandwidth. Except when labels are tilted, then the align is a pure align that shifts the position of the label anchoring point.", "optional": true, "defaultValue": 0.5, "type": "number" }, "filterOverlapping": { "description": "Toggle whether labels should be filtered if they are overlapping. Filtering may be applied in a non-sequential order.\nIf labels are overlapping and this setting is toggled off, the axis will automatically hide.", "optional": true, "defaultValue": false, "type": "boolean" }, "margin": { "description": "Space in pixels between the tick and label.", "optional": true, "defaultValue": 4, "type": "number" }, "maxEdgeBleed": { "description": "Control the amount of space (in pixels) that labes can occupy outside their docking area. Only applicable when labels are in `tilted` mode.", "optional": true, "type": "number" }, "maxGlyphCount": { "description": "When only a sub-set of data is available, ex. when paging. This property can be used to let the axis estimate how much space the labels will consume, allowing it to give a consistent space estimate over the entire dataset when paging.", "optional": true, "type": "number" }, "maxLengthPx": { "description": "Max length of labels in pixels", "optional": true, "defaultValue": 150, "type": "number" }, "minLengthPx": { "description": "Min length of labels in pixels. Labels will always at least require this much space", "optional": true, "defaultValue": 0, "type": "number" }, "mode": { "description": "Control how labels arrange themself. Availabe modes are `auto`, `horizontal`, `layered` and `tilted`. When set to `auto` the axis determines the best possible layout in the current context.", "optional": true, "defaultValue": "auto", "type": "string" }, "offset": { "description": "Offset in pixels along the axis direction.", "optional": true, "defaultValue": 0, "type": "number" }, "show": { "description": "Toggle labels on/off", "optional": true, "defaultValue": true, "type": "boolean" }, "tiltAngle": { "description": "Tilting angle in degrees. Capped between -90 and 90. Only applicable when labels are in `tilted` mode.", "optional": true, "defaultValue": 40, "type": "number" }, "tiltThreshold": { "description": "Threshold for toggle of tilted labels. Capped between 0 and 1. For example, if it is set to 0.7, then tilted labels will be toggled if less than 70% of the labels are visible.", "optional": true, "defaultValue": 0.7, "type": "number" } } }, "line": { "kind": "object", "entries": { "show": { "description": "Toggle line on/off", "optional": true, "defaultValue": false, "type": "boolean" } } }, "paddingEnd": { "description": "Padding in direction perpendicular to the axis", "optional": true, "defaultValue": 10, "type": "number" }, "paddingStart": { "description": "Padding in direction perpendicular to the axis", "optional": true, "defaultValue": 0, "type": "number" }, "ticks": { "kind": "object", "entries": { "margin": { "description": "Space in pixels between the ticks and the line.", "optional": true, "defaultValue": 0, "type": "number" }, "show": { "description": "Toggle ticks on/off", "optional": true, "defaultValue": false, "type": "boolean" }, "tickSize": { "description": "Size of the ticks in pixels.", "optional": true, "defaultValue": 4, "type": "number" } } } }, "examples": [ "{\n type: 'axis',\n scale: '<name-of-band-scale>',\n settings: {\n labels: {\n mode: 'tilted',\n tiltAngle: 40,\n },\n },\n}" ] } } }, "ComponentBox": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'box'" }, "data": { "kind": "object", "entries": { "min": { "description": "Min", "optional": true, "type": "number" }, "max": { "description": "Max", "optional": true, "type": "number" }, "start": { "description": "Start of box", "optional": true, "type": "number" }, "end": { "description": "End of box", "optional": true, "type": "number" }, "med": { "description": "Median", "optional": true, "type": "number" } } }, "settings": { "kind": "object", "entries": { "major": { "kind": "object", "entries": { "scale": { "description": "The scale to use along the major (dimension) axis", "type": "string" }, "ref": { "description": "Reference to the data property along the major axis", "optional": true, "defaultValue": "'self'", "kind": "union", "items": [ { "type": "string" }, { "type": "#/definitions/ComponentBox/definitions/MajorReference" } ], "type": "any" } } }, "minor": { "kind": "object", "entries": { "scale": { "description": "The scale to use along the minor (measure) axis", "type": "string" } } }, "orientation": { "description": "Which orientation to use (vertical or horizontal)", "optional": true, "defaultValue": "'vertical'", "type": "string" }, "box": { "description": "Visual properties for the box shape in the box marker", "optional": true, "kind": "object", "entries": { "show": { "description": "Boolean for showing the box shape", "optional": true, "defaultValue": true, "type": "boolean" }, "fill": { "optional": true, "defaultValue": "'#fff'", "type": "string" }, "stroke": { "optional": true, "defaultValue": "'#000'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" }, "strokeLinejoin": { "optional": true, "defaultValue": "'miter'", "type": "string" }, "width": { "optional": true, "defaultValue": 1, "type": "number" }, "maxWidthPx": { "description": "Maximum width of the box in pixels (not applicable when using major start and end)", "optional": true, "defaultValue": 100, "type": "number" }, "minWidthPx": { "description": "Minimum width of the box in pixels (not applicable when using major start and end)", "optional": true, "defaultValue": 1, "type": "number" }, "minHeightPx": { "description": "Minimum height of the box shape", "optional": true, "defaultValue": 1, "type": "number" } } }, "line": { "description": "Visual properties for lines between min-start, end-max.", "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "'#000'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" } } }, "whisker": { "description": "All the visual properties for whiskers at min and max.", "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "'#000'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" }, "width": { "optional": true, "defaultValue": 1, "type": "number" } } }, "median": { "description": "Visual properties for the median", "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "'#000'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" } } }, "oob": { "description": "EXPERIMENTAL: Out of bounds symbol utilizing the symbol API", "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "type": { "description": "Type of the symbol to be used", "optional": true, "defaultValue": "'n-polygon'", "type": "string" }, "fill": { "description": "Fill color of the symbol", "optional": true, "defaultValue": "'#999'", "type": "string" }, "stroke": { "description": "Stroke color", "optional": true, "defaultValue": "'#000'", "type": "string" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "number" }, "size": { "description": "Size/width of the symbol in pixels", "optional": true, "defaultValue": 10, "type": "number" }, "sides": { "description": "Number of sides for a n-polygon (3 for triangle)", "optional": true, "defaultValue": 3, "type": "number" } } } } } }, "examples": [ "{\n type: \"box\",\n data: {\n mapTo: {\n min: { source: \"/qHyperCube/qMeasureInfo/0\" },\n start: { source: \"/qHyperCube/qMeasureInfo/1\" },\n med: { source: \"/qHyperCube/qMeasureInfo/2\" },\n end: { source: \"/qHyperCube/qMeasureInfo/3\" },\n max: { source: \"/qHyperCube/qMeasureInfo/4\" },\n },\n groupBy: {\n source: \"/qHyperCube/qDimensionInfo/0\"\n }\n },\n settings: {\n major: {\n scale: { source: \"/qHyperCube/qDimensionInfo/0\" }\n },\n minor: {\n scale: { source: [\"/qHyperCube/qMeasureInfo/0\",\n \"/qHyperCube/qMeasureInfo/1\",\n \"/qHyperCube/qMeasureInfo/2\",\n \"/qHyperCube/qMeasureInfo/3\",\n \"/qHyperCube/qMeasureInfo/4\"] }\n }\n }\n}" ], "definitions": { "MajorReference": { "kind": "object", "entries": { "start": { "description": "Reference to the data property of the start value along the major axis", "type": "string" }, "end": { "description": "Reference to the data property of the end value along the major axis", "type": "string" } } } } }, "ComponentBrushArea": { "description": "A component that can brush a rectangular area", "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'brush-area'" }, "settings": { "kind": "object", "entries": { "brush": { "kind": "object", "entries": { "components": { "kind": "array", "items": { "type": "#/definitions/BrushTargetConfig" } } } } } } }, "examples": [ "{\n type: 'brush-area',\n brush: {\n components: [{ key: '<target-component>', contexts: ['highlight'] }]\n }\n}" ] }, "ComponentBrushAreaDir": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'brush-area-dir'" }, "settings": { "kind": "object", "entries": { "brush": { "kind": "object", "entries": { "components": { "kind": "array", "items": { "type": "#/definitions/BrushTargetConfig" } } } }, "direction": { "description": "Rendering direction [horizontal|vertical]", "optional": true, "defaultValue": "vertical", "type": "string" }, "bubbles": { "optional": true, "kind": "object", "entries": { "show": { "description": "True to show label bubble, false otherwise", "optional": true, "defaultValue": true, "type": "boolean" }, "align": { "description": "Where to anchor bubble [start|end]", "optional": true, "defaultValue": "start", "type": "string" }, "label": { "description": "Callback function for the labels", "optional": true, "type": "function" } } }, "target": { "optional": true, "kind": "object", "entries": { "components": { "description": "Render matching overlay on target components", "optional": true, "kind": "array", "items": { "type": "string" } } } } } } } }, "ComponentBrushLasso": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'brush-lasso'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "lasso": { "description": "Lasso style settings", "optional": true, "kind": "object", "entries": { "fill": { "optional": true, "defaultValue": "'transparent'", "type": "string" }, "stroke": { "optional": true, "defaultValue": "'black'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 2, "type": "number" }, "opacity": { "optional": true, "defaultValue": 0.7, "type": "number" }, "strokeDasharray": { "optional": true, "type": "number" } } }, "snapIndicator": { "description": "Snap indicator settings", "optional": true, "kind": "object", "entries": { "threshold": { "description": "The distance in pixel to show the snap indicator, if less then threshold the indicator is dispalyed", "optional": true, "defaultValue": 75, "type": "number" }, "strokeDasharray": { "optional": true, "defaultValue": "'5, 5'", "type": "string" }, "stroke": { "optional": true, "defaultValue": "'black'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 2, "type": "number" }, "opacity": { "optional": true, "defaultValue": 0.5, "type": "number" } } }, "startPoint": { "description": "Start point style settings", "optional": true, "kind": "object", "entries": { "r": { "description": "Circle radius", "optional": true, "defaultValue": 10, "type": "number" }, "stroke": { "optional": true, "defaultValue": "'green'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" }, "opacity": { "optional": true, "defaultValue": 1, "type": "number" } } }, "brush": { "optional": true, "kind": "object", "entries": { "components": { "description": "Array of components to brush on.", "kind": "array", "items": { "entries": { "component": { "kind": "object", "entries": { "key": { "description": "Component key", "optional": true, "type": "string" }, "contexts": { "description": "Name of the brushing contexts to affect", "optional": true, "defaultValue": "['brushLasso']", "kind": "array", "items": { "type": "string" } }, "data": { "description": "The mapped data properties to add to the brush", "optional": true, "defaultValue": "['']", "kind": "array", "items": { "type": "string" } }, "action": { "description": "Type of action to respond with", "optional": true, "defaultValue": "'add'", "type": "string" } } } }, "kind": "object" } } } } } } }, "examples": [ "{\n type: 'brush-lasso',\n settings: {\n brush: {\n components: [{ key: '<target-component>', contexts: ['<brush-context>'] }]\n }\n },\n}" ] }, "ComponentBrushRange": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'brush-range'" }, "settings": { "kind": "object", "entries": { "brush": { "description": "Brush context to apply changes to", "kind": "union", "items": [ { "type": "string" }, { "type": "object" } ], "type": "any" }, "scale": { "description": "Scale to extract data from", "type": "string" }, "direction": { "description": "Rendering direction [horizontal|vertical]", "optional": true, "defaultValue": "vertical", "type": "string" }, "bubbles": { "optional": true, "kind": "object", "entries": { "show": { "description": "True to show label bubble, false otherwise", "optional": true, "defaultValue": true, "type": "boolean" }, "align": { "description": "Where to anchor bubble [start|end]", "optional": true, "defaultValue": "start", "type": "string" }, "label": { "description": "Callback function for the labels", "optional": true, "type": "function" } } }, "target": { "optional": true, "kind": "object", "entries": { "components": { "description": "Render matching overlay on target components", "optional": true, "kind": "array", "items": { "type": "string" } }, "selector": { "description": "Instead of targeting a component, target one or more shapes", "optional": true, "type": "string" }, "fillSelector": { "description": "Target a subset of the selector as fill area. Only applicable if `selector` property is set", "optional": true, "type": "string" } } } } } } }, "ComponentContainer": { "stability": "experimental", "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'container'" } }, "examples": [ "{\n type: 'container',\n preferredSize: ({ inner, outer, dock, children }) => {\n const sizes = children.map(c => c.preferredSize({ inner, outer }));\n return Math.max(...sizes);\n },\n strategy: (rect, components) => {\n const height = rect.height / components.length;\n components.forEach((c, i) => {\n c.resize({ ...rect, height, y: rect.y + i * height })\n });\n return { visible: components, hidden: [], order: components };\n },\n components: [\n ...\n ],\n}" ] }, "ComponentGridLine": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'grid-line'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "x": { "kind": "object", "entries": { "scale": { "description": "The scale to use along x", "type": "string" } } }, "y": { "kind": "object", "entries": { "scale": { "description": "The scale to use along y", "type": "string" } } }, "ticks": { "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "'black'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": "'1'", "type": "number" }, "strokeDasharray": { "optional": true, "type": "string" } } }, "minorTicks": { "optional": true, "kind": "object", "entries": { "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "'black'", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": "'1'", "type": "number" }, "strokeDasharray": { "optional": true, "type": "string" } } } } } }, "examples": [ "{\n type: 'grid-line',\n settings: {\n x: {\n scale: '<name-of-scale>',\n },\n y: {\n scale: '<name-of-scale>',\n },\n },\n}" ] }, "ComponentLabels": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'labels'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "sources": { "description": "Source settings", "kind": "array", "items": { "type": "#/definitions/ComponentLabels/definitions/Source" } } } } }, "examples": [ "{\n type: 'labels',\n settings: {\n sources: [\n {\n component: 'bars',\n selector: 'rect', // select all 'rect' shapes from the 'bars' component\n strategy: {\n type: 'bar', // the strategy type\n settings: {\n labels: [\n {\n label({ data }) {\n return data ? data.end.label : '';\n },\n placements: [\n // label placements in prio order. Label will be placed in the first place it fits into\n { position: 'inside', fill: '#fff' },\n { position: 'outside', fill: '#666' },\n ],\n },\n ],\n },\n },\n },\n ],\n },\n}" ], "definitions": { "BarsLabelStrategy": { "kind": "object", "entries": { "type": { "description": "Name of strategy", "kind": "literal", "value": "'bar'" }, "settings": { "description": "Bars strategy settings", "kind": "object", "entries": { "direction": { "description": "The direction in which the bars are growing: 'up', 'down', 'right' or 'left'.", "optional": true, "defaultValue": "'up'", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "orientation": { "description": "Orientation of text: 'auto', 'horizontal' or 'vertical'", "optional": true, "defaultValue": "'auto'", "type": "string" }, "fontFamily": { "optional": true, "defaultValue": "'Arial'", "type": "string" }, "fontSize": { "optional": true, "defaultValue": 12, "type": "number" }, "labels": { "kind": "array", "items": { "entries": { "label": { "description": "The text value", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "linkData": { "description": "Link data to the label", "type": "function" }, "placements": { "kind": "array", "items": { "entries": { "position": { "description": "'inside' | 'outside' | 'opposite'", "type": "string" }, "justify": { "description": "Placement of the label along the direction of the bar", "optional": true, "defaultValue": 0, "type": "number" }, "align": { "description": "Placement of the label along the perpendicular direction of the bar", "optional": true, "defaultValue": 0.5, "type": "number" }, "fill": { "description": "Color of the label", "optional": true, "defaultValue": "'#333'", "type": "string" }, "overflow": { "description": "True if the label is allowed to overflow the bar", "optional": true, "defaultValue": false, "type": "boolean" }, "padding": { "description": "Padding between the label and the bar", "kind": "object", "entries": { "top": { "description": "Padding-top between the label and the bar. Can be a function, text dimensions object {width, height} is exposed as argument.", "optional": true, "defaultValue": 4, "kind": "union", "items": [ { "type": "number" }, { "type": "function" } ], "type": "any" }, "bottom": { "description": "Padding-bottom between the label and the bar. Can be a function, text dimensions object {width, height} is exposed as argument.", "optional": true, "defaultValue": 4, "kind": "union", "items": [ { "type": "number" }, { "type": "function" } ], "type": "any" }, "left": { "description": "Padding-left between the label and the bar. Can be a function, text dimensions object {width, height} is exposed as argument.", "optional": true, "defaultValue": 4, "kind": "union", "items": [ { "type": "number" }, { "type": "function" } ], "type": "any" }, "right": { "description": "Padding-right between the label and the bar. Can be a function, text dimensions object {width, height} is exposed as argument.", "optional": true, "defaultValue": 4, "kind": "union", "items": [ { "type": "number" }, { "type": "function" } ], "type": "any" } } }, "background": { "description": "Background of the label", "kind": "object", "entries": { "fill": { "description": "Background color of the label", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "padding": { "description": "Padding between the label and the background", "kind": "object", "entries": { "top": { "description": "Padding-top between the label and the background", "optional": true, "defaultValue": 4, "type": "number" }, "bottom": { "description": "Padding-bottom between the label and the background", "optional": true, "defaultValue": 4, "type": "number" }, "left": { "description": "Padding-left between the label and the background", "optional": true, "defaultValue": 4, "type": "number" }, "right": { "description": "Padding-right between the label and the background", "optional": true, "defaultValue": 4, "type": "number" } } } } } }, "kind": "object" } } }, "kind": "object" } } } } } }, "RowsLabelStrategy": { "kind": "object", "entries": { "type": { "description": "Name of strategy", "kind": "literal", "value": "'rows'" }, "settings": { "description": "Rows strategy settings", "kind": "object", "entries": { "fontFamily": { "optional": true, "defaultValue": "'Arial'", "type": "string" }, "fontSize": { "optional": true, "defaultValue": 12, "type": "number" }, "justify": { "optional": true, "defaultValue": 0.5, "type": "number" }, "padding": { "optional": true, "defaultValue": 4, "type": "number" }, "labels": { "kind": "array", "items": { "entries": { "label": { "description": "The text value", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "linkData": { "description": "Link data to the label", "type": "function" }, "align": { "optional": true, "defaultValue": 0.5, "type": "number" }, "fill": { "optional": true, "defaultValue": "'#333'", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" } }, "kind": "object" } } } } } }, "SlicesLabelStrategy": { "kind": "object", "entries": { "type": { "description": "Name of strategy", "kind": "literal", "value": "'slice'" }, "settings": { "description": "Slices strategy settings", "kind": "object", "entries": { "direction": { "description": "The direction of the text: 'horizontal' or 'rotate'.", "optional": true, "defaultValue": "'horizontal'", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "fontFamily": { "optional": true, "defaultValue": "'Arial'", "type": "string" }, "fontSize": { "optional": true, "defaultValue": 12, "type": "number" }, "labels": { "kind": "array", "items": { "entries": { "label": { "description": "The text value", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "linkData": { "description": "Link data to the label", "type": "function" }, "placements": { "kind": "array", "items": { "entries": { "position": { "description": "'inside' | 'into' | 'outside' (outside is not implmented yet)", "optional": true, "defaultValue": "'into'", "type": "string" }, "fill": { "description": "Color of the label", "optional": true, "defaultValue": "'#333'", "type": "string" } }, "kind": "object" } } }, "kind": "object" } } } } } }, "Source": { "kind": "object", "entries": { "component": { "description": "Key of target component", "type": "string" }, "selector": { "description": "Shape selector", "type": "string" }, "strategy": { "description": "Strategy settings", "kind": "union", "items": [ { "type": "#/definitions/ComponentLabels/definitions/BarsLabelStrategy" }, { "type": "#/definitions/ComponentLabels/definitions/RowsLabelStrategy" }, { "type": "#/definitions/ComponentLabels/definitions/SlicesLabelStrategy" } ], "type": "any" } } } } }, "ComponentLegendCat": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'legend-cat'" }, "scale": { "description": "Reference to categorical color scale", "type": "string" }, "settings": { "description": "Component settings", "optional": true, "kind": "object", "entries": { "item": { "description": "Settings applied per item", "optional": true, "kind": "object", "entries": { "align": { "description": "Align item", "optional": true, "defaultValue": 0.5, "type": "number" }, "justify": { "description": "Justify item", "optional": true, "defaultValue": 0.5, "type": "number" }, "label": { "optional": true, "kind": "object", "entries": { "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "Arial", "type": "string" }, "fontSize": { "description": "Font size in pixels", "optional": true, "defaultValue": "12px", "type": "string" }, "lineHeight": { "description": "Line height as a multiple of the font size", "optional": true, "defaultValue": 1.2, "type": "number" }, "maxLines": { "description": "Max number of lines allowed if label is broken into multiple lines (only applicable with wordBreak)", "optional": true, "defaultValue": 2, "type": "number" }, "maxWidth": { "description": "Maximum width of label, in px", "optional": true, "defaultValue": 136, "type": "number" }, "wordBreak": { "description": "Word break rule, how to apply line break if label text overflows its maxWidth property. Either `'break-word'` or `'break-all'`", "optional": true, "defaultValue": "none", "type": "string" } } }, "shape": { "optional": true, "kind": "object", "entries": { "size": { "description": "Size of shape in pixels", "optional": true, "defaultValue": 12, "type": "number" }, "type": { "description": "Type of shape", "optional": true, "defaultValue": "square", "type": "string" } } }, "show": { "description": "Whether to show the current item", "optional": true, "defaultValue": true, "type": "boolean" } } }, "layout": { "optional": true, "kind": "object", "entries": { "direction": { "description": "Layout direction. Either `'ltr'` or `'rtl'`", "optional": true, "defaultValue": "ltr", "type": "string" }, "scrollOffset": { "description": "Initial scroll offset", "optional": true, "defaultValue": 0, "type": "number" }, "size": { "description": "Maximum number of columns (vertical) or rows (horizontal)", "optional": true, "defaultValue": 1, "type": "number" } } }, "navigation": { "optional": true, "kind": "object", "entries": { "button": { "optional": true, "kind": "object", "entries": { "class": { "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "boolean" } ] }, "content": { "type": "function" }, "tabIndex": { "optional": true, "type": "number" } } }, "disabled": { "description": "Whether the button should be disabled or not", "optional": true, "defaultValue": false, "type": "boolean" } } }, "title": { "optional": true, "kind": "object", "entries": { "anchor": { "description": "Horizontal alignment of the text. Allowed values are `'start'`, `'middle'` and `'end'`", "defaultValue": "start", "type": "string" }, "fill": { "description": "Title color", "optional": true, "defaultValue": "#595959", "type": "string" }, "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "Arial", "type": "string" }, "fontSize": { "description": "Font size in pixels", "optional": true, "defaultValue": "16px", "type": "string" }, "lineHeight": { "description": "Line height as a multiple of the font size", "optional": true, "defaultValue": 1.25, "type": "number" }, "maxLines": { "description": "Max number of lines allowed if label is broken into multiple lines, is only appled when `wordBreak` is not set to `'none'`", "optional": true, "defaultValue": 2, "type": "number" }, "maxWidth": { "description": "Maximum width of title, in px", "optional": true, "defaultValue": 156, "type": "number" }, "show": { "description": "Whether to show the title", "optional": true, "defaultValue": true, "type": "boolean" }, "text": { "description": "Title text. Defaults to the title of the provided data field", "optional": true, "type": "string" }, "wordBreak": { "description": "Word break rule, how to apply line break if label text overflows its maxWidth property. Either `'break-word'` or `'break-all'`", "optional": true, "defaultValue": "none", "type": "string" } } } } } }, "examples": [ "{\n type: 'legend-cat',\n scale: '<categorical-color-scale>',\n}" ] }, "ComponentLegendSeq": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'legend-seq'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "fill": { "description": "Reference to definition of sequential color scale", "type": "string" }, "major": { "description": "Reference to definition of linear scale", "type": "string" }, "size": { "description": "Size in pixels of the legend, if vertical is the width and height otherwise", "optional": true, "defaultValue": 15, "type": "number" }, "length": { "description": "A value in the range 0-1 indicating the length of the legend node", "optional": true, "defaultValue": 1, "type": "number" }, "maxLengthPx": { "description": "Max length in pixels", "optional": true, "defaultValue": 250, "type": "number" }, "align": { "description": "A value in the range 0-1 indicating horizontal alignment of the legend's content. 0 aligns to the left, 1 to the right.", "optional": true, "defaultValue": 0.5, "type": "number" }, "justify": { "description": "A value in the range 0-1 indicating vertical alignment of the legend's content. 0 aligns to the top, 1 to the bottom.", "optional": true, "defaultValue": 0, "type": "number" }, "padding": { "optional": true, "kind": "object", "entries": { "left": { "description": "Size in pixels", "optional": true, "defaultValue": 5, "type": "number" }, "right": { "description": "Size in pixels", "optional": true, "defaultValue": 5, "type": "number" }, "top": { "description": "Size in pixels", "optional": true, "defaultValue": 5, "type": "number" }, "bottom": { "description": "Size in pixels", "optional": true, "defaultValue": 5, "type": "number" } } }, "tick": { "optional": true, "kind": "object", "entries": { "label": { "description": "Function applied to all tick values. Return value should be a string and is used as label", "optional": true, "type": "function" }, "fill": { "description": "Tick color", "optional": true, "defaultValue": "'#595959'", "type": "string" }, "fontSize": { "description": "Font size in pixels", "optional": true, "defaultValue": "'12px'", "type": "string" }, "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "'Arial'", "type": "string" }, "maxLengthPx": { "description": "Max length in pixels", "optional": true, "defaultValue": 150, "type": "number" }, "anchor": { "description": "Where to anchor the tick in relation to the legend node, supported values are [top, bottom, left and right] or empty string to auto anchor", "optional": true, "defaultValue": "''", "type": "string" }, "padding": { "description": "padding in pixels to the legend node", "optional": true, "defaultValue": 5, "type": "number" } } }, "title": { "description": "Title settings", "optional": true, "kind": "object", "entries": { "show": { "description": "Toggle title on/off", "optional": true, "defaultValue": true, "type": "boolean" }, "text": { "description": "Title text. Defaults to the title of the provided data field", "optional": true, "defaultValue": "''", "type": "string" }, "fill": { "description": "Title color", "optional": true, "defaultValue": "'#595959'", "type": "string" }, "fontSize": { "description": "Font size in pixels", "optional": true, "defaultValue": "'12px'", "type": "string" }, "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "'Arial'", "type": "string" }, "maxLengthPx": { "description": "Max length in pixels", "optional": true, "defaultValue": 100, "type": "number" }, "padding": { "description": "padding in pixels to the legend node", "optional": true, "defaultValue": 5, "type": "number" }, "anchor": { "description": "Where to anchor the title in relation to the legend node, supported values are [top, left and right] or empty string to auto anchor", "optional": true, "defaultValue": "''", "type": "string" }, "wordBreak": { "description": "How overflowing title is handled, if it should insert line breaks at word boundries (break-word) or character boundries (break-all)", "optional": true, "defaultValue": "'none'", "type": "string" }, "hyphens": { "description": "How words should be hyphenated when text wraps across multiple lines (only applicable with wordBreak)", "optional": true, "defaultValue": "'auto'", "type": "string" }, "maxLines": { "description": "Number of allowed lines if title contains line breaks (only applicable with wordBreak)", "optional": true, "defaultValue": 2, "type": "number" }, "lineHeight": { "description": "A multiplier defining the distance between lines (only applicable with wordBreak)", "optional": true, "defaultValue": 1.2, "type": "number" } } } } } }, "examples": [ "{\n type: 'legend-seq',\n settings: {\n fill: '<sequential-color-scale>',\n major: '<linear-scale>',\n }\n}" ] }, "ComponentLine": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'line'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "connect": { "optional": true, "defaultValue": false, "type": "boolean" }, "coordinates": { "kind": "object", "entries": { "defined": { "optional": true, "defaultValue": true, "type": "#/definitions/DatumBoolean" }, "layerId": { "optional": true, "defaultValue": 0, "type": "number" }, "major": { "defaultValue": 0.5, "type": "number" }, "minor": { "defaultValue": 0.5, "type": "number" } } }, "layers": { "kind": "object", "entries": { "area": { "kind": "object", "entries": { "fill": { "optional": true, "defaultValue": "#ccc", "type": "string" }, "opacity": { "optional": true, "defaultValue": 0.8, "type": "number" }, "show": { "optional": true, "defaultValue": true, "type": "boolean" } } }, "curve": { "optional": true, "defaultValue": "linear", "type": "string" }, "line": { "kind": "object", "entries": { "opacity": { "optional": true, "defaultValue": 1, "type": "number" }, "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "showMinor0": { "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "optional": true, "defaultValue": "#ccc", "type": "string" }, "strokeDasharray": { "optional": true, "type": "string" }, "strokeLinejoin": { "optional": true, "defaultValue": "miter", "type": "string" }, "strokeWidth": { "optional": true, "defaultValue": 1, "type": "number" } } }, "show": { "optional": true, "defaultValue": true, "type": "boolean" }, "sort": { "optional": true, "type": "#/definitions/ComponentLine/definitions/LayerSort" } } }, "orientation": { "optional": true, "defaultValue": "horizontal", "type": "string" } } } }, "examples": [ "{\n type: \"line\",\n data: {\n extract: {\n field: \"Year\",\n props: {\n sales: { field: \"Sales\" },\n },\n },\n },\n settings: {\n coordinates: {\n major: { scale: \"t\" },\n minor: { scale: \"y\", ref: \"sales\" },\n },\n },\n}" ], "definitions": { "LayerSort": { "description": "Callback function for layer sort", "kind": "function", "params": [ { "name": "a", "kind": "object", "entries": { "id": { "type": "string" }, "data": { "kind": "array", "items": { "type": "#/definitions/DatumExtract" } } } }, { "name": "b", "kind": "object", "entries": { "id": { "type": "string" }, "data": { "kind": "array", "items": { "type": "#/definitions/DatumExtract" } } } } ] } } }, "ComponentPie": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'pie'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "endAngle": { "description": "End angle of the pie, in radians", "optional": true, "type": "number" }, "slice": { "kind": "object", "entries": { "arc": { "description": "Absolute value of the slice's arc length", "optional": true, "defaultValue": 1, "type": "number" }, "cornerRadius": { "description": "Corner radius of the slice, in pixels", "optional": true, "defaultValue": 0, "type": "number" }, "fill": { "description": "Fill color of the slice", "optional": true, "defaultValue": "#333", "type": "string" }, "innerRadius": { "description": "Inner radius of the slice", "optional": true, "defaultValue": 0, "type": "number" }, "offset": { "description": "Radial offset of the slice", "optional": true, "defaultValue": 0, "type": "number" }, "opacity": { "description": "Opacity of the slice", "optional": true, "defaultValue": 1, "type": "number" }, "outerRadius": { "description": "Outer radius of the slice", "optional": true, "defaultValue": 0.8, "type": "number" }, "show": { "description": "Visibility of the slice", "optional": true, "defaultValue": true, "type": "boolean" }, "stroke": { "description": "Stroke color of the slice", "optional": true, "defaultValue": "#ccc", "type": "string" }, "strokeLinejoin": { "description": "Stroke line join", "optional": true, "defaultValue": "round", "type": "string" }, "strokeWidth": { "description": "Stroke width of the slice", "optional": true, "defaultValue": 1, "type": "number" } } }, "startAngle": { "description": "Start angle of the pie, in radians", "optional": true, "defaultValue": 0, "type": "number" } } } }, "examples": [ "{\n type: 'pie',\n data: {\n extract: {\n field: 'Region',\n props: {\n num: { field: 'Population' }\n }\n }\n },\n settings: {\n startAngle: Math.PI / 2,\n endAngle: -Math.PI / 2,\n slice: {\n arc: { ref: 'num' },\n fill: 'green',\n stroke: 'red',\n strokeWidth: 2,\n strokeLinejoin: 'round',\n innerRadius: 0.6,\n outerRadius 0.8,\n opacity: 0.8,\n offset: 0.2\n }\n }\n}" ] }, "ComponentPoint": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'point'" }, "settings": { "description": "Component settings", "optional": true, "kind": "object", "entries": { "fill": { "description": "Fill color", "optional": true, "defaultValue": "#333", "type": "#/definitions/DatumString" }, "label": { "description": "Label", "optional": true, "defaultValue": "", "type": "#/definitions/DatumString" }, "opacity": { "description": "Opacity of shape", "optional": true, "defaultValue": 1, "type": "#/definitions/DatumNumber" }, "shape": { "description": "Type of shape", "optional": true, "defaultValue": "circle", "type": "#/definitions/DatumString" }, "show": { "description": "Whether or not to show the point", "optional": true, "defaultValue": true, "type": "#/definitions/DatumBoolean" }, "size": { "description": "Normalized size of shape", "optional": true, "defaultValue": 1, "type": "#/definitions/DatumNumber" }, "sizeLimits": { "optional": true, "kind": "object", "entries": { "maxPx": { "description": "Maximum size of shape, in pixels", "optional": true, "defaultValue": 10000, "type": "number" }, "maxRelDiscrete": { "description": "Maximum size relative discrete scale banwidth", "optional": true, "defaultValue": 1, "type": "number" }, "maxRelExtent": { "description": "Maximum size relative linear scale extent", "optional": true, "defaultValue": 0.1, "type": "number" }, "minPx": { "description": "Minimum size of shape, in pixels", "optional": true, "defaultValue": 1, "type": "number" }, "minRelDiscrete": { "description": "Minimum size relative discrete scale banwidth", "optional": true, "defaultValue": 0.1, "type": "number" }, "minRelExtent": { "description": "Minimum size relative linear scale extent", "optional": true, "defaultValue": 0.01, "type": "number" } } }, "stroke": { "description": "Stroke color", "optional": true, "defaultValue": "#ccc", "type": "#/definitions/DatumString" }, "strokeDasharray": { "description": "Stroke dash array", "optional": true, "defaultValue": "", "type": "#/definitions/DatumString" }, "strokeLinejoin": { "description": "Stroke line join", "optional": true, "defaultValue": "miter", "type": "#/definitions/DatumString" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "#/definitions/DatumNumber" }, "x": { "description": "Normalized x coordinate", "optional": true, "defaultValue": 0.5, "type": "#/definitions/DatumNumber" }, "y": { "description": "Normalized y coordinate", "optional": true, "defaultValue": 0.5, "type": "#/definitions/DatumNumber" } } } }, "examples": [ "{\n type: 'point',\n data: {\n extract: {\n field: 'Month',\n props: {\n x: { field: 'Margin' },\n y: { field: 'Year' }\n }\n }\n },\n settings: {\n x: { scale: 'm' },\n y: { scale: 'y' },\n }\n}" ] }, "ComponentRefLine": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'ref-line'" }, "settings": { "description": "Component settings", "kind": "object", "entries": { "lines": { "description": "X & Y Lines", "kind": "object", "entries": { "x": { "description": "Reference lines along X axis", "optional": true, "defaultValue": "[]", "kind": "array", "items": { "type": "#/definitions/ComponentRefLine/definitions/Line" } }, "y": { "description": "Reference lines along Y axis", "optional": true, "defaultValue": "[]", "kind": "array", "items": { "type": "#/definitions/ComponentRefLine/definitions/Line" } } } } } } }, "examples": [ "{\n type: 'ref-line',\n lines: {\n y: [{\n scale: 'y',\n value: 5000,\n label: {\n text: 'value label'\n }\n slope: 0.5,\n }]\n }\n}" ], "definitions": { "GenericObject": { "kind": "object", "entries": { "fill": { "description": "Fill color", "optional": true, "defaultValue": "'#fff'", "type": "string" }, "stroke": { "description": "Stroke", "optional": true, "defaultValue": "'transparent'", "type": "string" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "number" }, "opacity": { "description": "Opacity", "optional": true, "defaultValue": 1, "type": "number" } } }, "GenericText": { "kind": "object", "entries": { "text": { "description": "Text (if applicable)", "optional": true, "defaultValue": "''", "type": "string" }, "fontSize": { "description": "Font size (if applicable)", "optional": true, "defaultValue": "'12px'", "type": "string" }, "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "'Arial'", "type": "string" }, "fill": { "description": "Fill color", "optional": true, "defaultValue": "'#fff'", "type": "string" }, "stroke": { "description": "Stroke", "optional": true, "defaultValue": "'transparent'", "type": "string" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "number" }, "strokeDasharray": { "description": "Stroke dash array", "optional": true, "type": "string" }, "opacity": { "description": "Opacity", "optional": true, "defaultValue": 1, "type": "number" } } }, "Line": { "kind": "object", "entries": { "value": { "description": "The value of the reference line. If a scale is specified, it is applied.", "kind": "union", "items": [ { "type": "number" }, { "type": "function" } ], "type": "any" }, "scale": { "description": "Scale to use (if undefined will use normalized value 0-1)", "optional": true, "type": "string" }, "line": { "description": "The style of the line", "optional": true, "defaultValue": "ComponentRefLine~GenericObject", "type": "#/definitions/ComponentRefLine/definitions/GenericObject" }, "label": { "description": "The label style of the line", "optional": true, "defaultValue": "ComponentRefLine~LineLabel", "type": "#/definitions/ComponentRefLine/definitions/LineLabel" }, "slope": { "description": "The slope for the reference line", "optional": true, "defaultValue": 0, "type": "number" } } }, "LineLabel": { "kind": "object", "entries": { "padding": { "description": "Padding inside the label", "defaultValue": 5, "type": "number" }, "text": { "description": "Text", "optional": true, "defaultValue": "''", "type": "string" }, "fontSize": { "description": "Font size", "optional": true, "defaultValue": "'12px'", "type": "string" }, "fontFamily": { "description": "Font family", "optional": true, "defaultValue": "'Arial'", "type": "string" }, "stroke": { "description": "Stroke", "optional": true, "defaultValue": "'transparent'", "type": "string" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "number" }, "opacity": { "description": "Opacity", "optional": true, "defaultValue": 1, "type": "number" }, "align": { "description": "Alignment property left to right (0 = left, 1 = right). Also supports string ('left', 'center', 'middle', 'right')", "optional": true, "defaultValue": 0, "kind": "union", "items": [ { "type": "number" }, { "type": "string" } ], "type": "any" }, "vAlign": { "description": "Alignment property top to bottom (0 = top, 1 = bottom). Also supports string ('top', 'center', 'middle', 'bottom')", "optional": true, "defaultValue": 0, "kind": "union", "items": [ { "type": "number" }, { "type": "string" } ], "type": "any" }, "maxWidth": { "description": "The maximum relative width to the width of the rendering area (see maxWidthPx as well)", "optional": true, "defaultValue": 1, "type": "number" }, "maxWidthPx": { "description": "The maximum width in pixels. Labels will be rendered with the maximum size of the smallest value of maxWidth and maxWidthPx size, so you may specify maxWidth 0.8 but maxWidthPx 100 and will never be over 100px and never over 80% of the renderable area", "optional": true, "defaultValue": 9999, "type": "number" }, "background": { "description": "The background style (rect behind text)", "optional": true, "defaultValue": "ComponentRefLine~LineLabelBackground", "type": "#/definitions/ComponentRefLine/definitions/LineLabelBackground" }, "show": { "description": "Show label", "optional": true, "defaultValue": true, "type": "boolean" }, "showValue": { "description": "Show value label", "optional": true, "defaultValue": true, "type": "boolean" } } }, "LineLabelBackground": { "kind": "object", "entries": { "fill": { "description": "Fill color", "optional": true, "defaultValue": "'#fff'", "type": "string" }, "stroke": { "description": "Stroke", "optional": true, "defaultValue": "'transparent'", "type": "string" }, "strokeWidth": { "description": "Stroke width", "optional": true, "defaultValue": 0, "type": "number" }, "opacity": { "description": "Opacity", "optional": true, "defaultValue": 0.5, "type": "number" } } } } }, "ComponentSettings": { "description": "Generic settings available to all components", "kind": "interface", "entries": { "type": { "description": "Component type (ex: axis, point, ...)", "type": "string" }, "preferredSize": { "description": "Function returning the preferred size", "optional": true, "type": "function" }, "created": { "description": "Called when the component has been created", "optional": true, "type": "function" }, "beforeMount": { "description": "Called before the component has been mounted", "optional": true, "type": "function" }, "mounted": { "description": "Called after the component has been mounted", "optional": true, "type": "function" }, "beforeUpdate": { "description": "Called before the component has been updated", "optional": true, "type": "function" }, "updated": { "description": "Called after the component has been updated", "optional": true, "type": "function" }, "beforeRender": { "description": "Called before the component has been rendered", "optional": true, "type": "function" }, "beforeDestroy": { "description": "Called before the component has been destroyed", "optional": true, "type": "function" }, "destroyed": { "description": "Called after the component has been destroyed", "optional": true, "type": "function" }, "brush": { "description": "Brush settings", "optional": true, "kind": "object", "entries": { "trigger": { "description": "Trigger settings", "optional": true, "kind": "array", "items": { "type": "#/definitions/BrushTriggerSettings" } }, "consume": { "description": "Consume settings", "optional": true, "kind": "array", "items": { "type": "#/definitions/BrushConsumeSettings" } }, "sortNodes": { "description": "Sorting function for nodes. Should return sorted nodes.", "optional": true, "type": "function" } } }, "layout": { "description": "Layout settings", "optional": true, "kind": "object", "entries": { "displayOrder": { "optional": true, "defaultValue": 0, "type": "number" }, "prioOrder": { "optional": true, "defaultValue": 0, "type": "number" }, "minimumLayoutMode": { "description": "Refer to layout sizes defined by layoutModes in `strategy`", "optional": true, "kind": "union", "items": [ { "type": "string" }, { "type": "Object" } ], "type": "any" }, "dock": { "description": "left, right, top or bottom", "optional": true, "type": "string" } } }, "show": { "description": "If the component should be rendered", "optional": true, "defaultValue": true, "type": "boolean" }, "scale": { "description": "Named scale. Will be provided to the component if it asks for it.", "optional": true, "type": "string" }, "formatter": { "description": "Named formatter. Fallback to create formatter from scale. Will be provided to the component if it asks for it.", "optional": true, "type": "string" }, "components": { "description": "Optional list of child components", "optional": true, "kind": "array", "items": { "type": "#/definitions/ComponentSettings" }, "stability": "experimental" }, "strategy": { "description": "Layout strategy used for child components.", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DockLayoutSettings" }, { "type": "#/definitions/customLayoutFunction" } ], "type": "any", "stability": "experimental" }, "data": { "description": "Extracted data that should be available to the component", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction" }, { "type": "#/definitions/DataFieldExtraction" } ], "type": "any" }, "rendererSettings": { "description": "Settings for the renderer used to render the component", "optional": true, "type": "#/definitions/RendererSettings" }, "key": { "description": "Component key", "optional": true, "type": "string" } } }, "ComponentText": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'text'" }, "text": { "description": "Text to display", "kind": "union", "items": [ { "type": "string" }, { "type": "function" } ], "type": "any" }, "settings": { "kind": "object", "entries": { "paddingStart": { "description": "Start padding in pixels", "optional": true, "defaultValue": 5, "type": "number" }, "paddingEnd": { "description": "End padding in pixels", "optional": true, "defaultValue": 5, "type": "number" }, "paddingLeft": { "description": "Left padding in pixels", "optional": true, "defaultValue": 0, "type": "number" }, "paddingRight": { "description": "Right padding in pixels", "optional": true, "defaultValue": 0, "type": "number" }, "anchor": { "description": "Where to v- or h-align the text. Supports `left`, `right`, `top`, `bottom` and `center`", "optional": true, "defaultValue": "'center'", "type": "string" }, "join": { "description": "String to add when joining titles from multiple sources", "optional": true, "defaultValue": "', '", "type": "string" }, "maxLengthPx": { "description": "Limit the text length", "optional": true, "type": "number" } } }, "style": { "kind": "object", "entries": { "text": { "optional": true, "type": "object", "kind": "object", "entries": { "fontSize": { "description": "Font size of text", "optional": true, "defaultValue": "'12px'", "type": "string" }, "fontFamily": { "description": "Font family of text", "optional": true, "defaultValue": "'Source Sans Pro'", "type": "string" }, "fontWeight": { "description": "Font weight of text", "optional": true, "defaultValue": "'normal'", "type": "string" }, "fill": { "description": "Fill color of text", "optional": true, "defaultValue": "'#ffffff'", "type": "string" }, "stroke": { "description": "Stroke of text", "optional": true, "defaultValue": "'transparent'", "type": "string" }, "strokeWidth": { "description": "Stroke width of text", "optional": true, "defaultValue": 0, "type": "number" }, "opacity": { "description": "Opacity of text", "optional": true, "defaultValue": 1, "type": "number" } } } } } }, "examples": [ "{\n type: 'text',\n text: 'my title',\n dock: 'left',\n settings: {\n anchor: 'left',\n }\n}" ] }, "ComponentTooltip": { "extends": [ { "type": "#/definitions/ComponentSettings" } ], "kind": "object", "entries": { "type": { "description": "component type", "kind": "literal", "value": "'tooltip'" }, "settings": { "kind": "object", "entries": { "afterHide": { "description": "Component lifecycle hook. Called after the tooltip is hidden.", "optional": true, "kind": "function", "params": [] }, "afterShow": { "description": "Component lifecycle hook. Called after the tooltip have been displayed.", "optional": true, "kind": "function", "params": [] }, "appendTo": { "description": "Explicitly set a target element. This allows the tooltip to attach itself outside the picasso container.", "optional": true, "type": "HTMLElement" }, "arrowClass": { "description": "Set arrow class.", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "boolean" } ] }, "beforeHide": { "description": "Component lifecycle hook. Called before the tooltip is hidden.", "optional": true, "kind": "function", "params": [ { "name": "ctx", "description": "Callback paramater", "kind": "object", "entries": { "element": { "description": "The element the tooltip is appended to", "type": "HTMLElement" } } } ] }, "beforeShow": { "description": "Component lifecycle hook. Called before the tooltip is displayed.", "optional": true, "kind": "function", "params": [] }, "content": { "description": "Callback function to generate content. Should return an array of Virtual DOM Elements.", "optional": true, "kind": "function", "params": [ { "name": "ctx", "description": "Callback context", "kind": "object", "entries": { "data": { "description": "An array of data generated from the `extract` function", "kind": "array", "items": { "type": "any" } }, "h": { "description": "A function for creating Virtual DOM Elements. See API reference for preactjs `h` function", "type": "object" } } } ], "returns": { "description": "An array of Virtual DOM Elements", "kind": "array", "items": { "type": "object" } }, "examples": [ "({ h, data }) => data.map((datum) => h('div', {}, datum))" ] }, "contentClass": { "description": "Set content class.", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "boolean" } ] }, "delay": { "description": "Delay before the tooltip is rendered, in milliseconds", "optional": true, "defaultValue": 500, "type": "number" }, "direction": { "description": "Content direction [ltr | rtl]", "optional": true, "defaultValue": "ltr", "type": "string" }, "duration": { "description": "How long the tooltip is visible, in milliseconds", "optional": true, "defaultValue": 8000, "type": "number" }, "extract": { "description": "Callback function called for each node to extract data. Can return any type.", "optional": true, "kind": "function", "params": [ { "name": "ctx", "description": "Callback context", "kind": "object", "entries": { "node": { "description": "Node", "type": "#/definitions/SceneNode" } } } ], "returns": { "description": "Return data", "type": "any" }, "examples": [ "(ctx) => ctx.node.data.value" ] }, "filter": { "description": "Callback function to filter incoming nodes to only a set of applicable nodes. Is called as a part of the `show` event.\n\nShould return an array of SceneNodes.", "optional": true, "kind": "function", "params": [ { "name": "nodes", "description": "Array of SceneNodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } } ], "returns": { "description": "An array of SceneNodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, "examples": [ "filter: (nodes) => nodes.filter((node) => node.data && typeof node.data.value !== 'undefined')" ] }, "isEqual": { "description": "Comparison function. If evaluted to true, the incoming nodes in the `show` event are ignored. If evaluated to false, any active tooltip is cleared and a new tooltip is queued.\n\nThe function gets two parameters, the first is the currently active set of nodes, if any, and the second is the incoming set of nodes. By default the two set of nodes are considered equal if their data attributes are the same.", "optional": true, "kind": "function", "params": [ { "name": "prev", "description": "Previous array of SceneNodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, { "name": "curr", "description": "Current array of SceneNodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } } ], "returns": { "type": "boolean" } }, "onHide": { "description": "Component lifecycle hook. Called when the toolip is hidden. By default this deletes the tooltip element.", "optional": true, "kind": "function", "params": [ { "name": "ctx", "description": "Callback paramater", "kind": "object", "entries": { "element": { "description": "The element the tooltip is appended to", "type": "HTMLElement" } } } ] }, "placement": { "optional": true, "kind": "object", "entries": { "area": { "description": "Specify the limiting area, where target is the component area unless the appendTo property is set, in which case it referes to the appendTo element. Viewport is the browser viewport.\n\nAvailable options are: [viewport | target]", "optional": true, "defaultValue": "viewport", "type": "number" }, "dock": { "description": "Docking position of the tooltip. Available positions: [left | right | top | bottom | auto]", "optional": true, "defaultValue": "auto", "type": "string" }, "offset": { "description": "Distance from the content area to the tooltip position, in px.", "optional": true, "defaultValue": 8, "type": "number" }, "type": { "description": "Available types: [pointer | bounds | slice]", "optional": true, "defaultValue": "pointer", "type": "string" } } }, "tooltipClass": { "description": "Set tooltip class.", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "boolean" } ] } } } }, "examples": [ "picasso.chart({\n settings: {\n interactions: [{\n type: 'native',\n events: {\n mousemove(e) {\n const tooltip = this.chart.component('<tooltip-key>');\n tooltip.emit('show', e);\n },\n mouseleave(e) {\n const tooltip = this.chart.component('<tooltip-key>');\n tooltip.emit('hide');\n }\n }\n }],\n components: [\n {\n key: '<tooltip-key>',\n type: 'tooltip'\n }\n ]\n },\n ...\n});" ] }, "ComponentTypes": { "kind": "union", "items": [ { "type": "#/definitions/ComponentAxis" }, { "type": "#/definitions/ComponentBox" }, { "type": "#/definitions/ComponentBrushArea" }, { "type": "#/definitions/ComponentBrushAreaDir" }, { "type": "#/definitions/ComponentBrushLasso" }, { "type": "#/definitions/ComponentBrushRange" }, { "type": "#/definitions/ComponentContainer" }, { "type": "#/definitions/ComponentGridLine" }, { "type": "#/definitions/ComponentLabels" }, { "type": "#/definitions/ComponentLegendCat" }, { "type": "#/definitions/ComponentLegendSeq" }, { "type": "#/definitions/ComponentLine" }, { "type": "#/definitions/ComponentPie" }, { "type": "#/definitions/ComponentPoint" }, { "type": "#/definitions/ComponentRefLine" }, { "type": "#/definitions/ComponentText" }, { "type": "#/definitions/ComponentTooltip" } ], "type": "any" }, "customLayoutFunction": { "kind": "function", "params": [ { "name": "rect", "type": "#/definitions/Rect" }, { "name": "components", "kind": "array", "items": { "entries": { "key": { "type": "string" }, "dockConfig": { "type": "object" }, "resize": { "type": "function" }, "preferredSize": { "type": "function" } }, "kind": "object" } } ] }, "DataExtraction": { "description": "Used to extract data from a `DataSource`", "kind": "object", "entries": { "extract": { "description": "Extract definition", "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract" }, { "kind": "array", "items": { "type": "#/definitions/DataExtraction/definitions/Extract" } } ], "type": "any" }, "stack": { "description": "If provided, defines how the data should be stacked", "optional": true, "kind": "object", "entries": { "stackKey": { "description": "Callback function. Should return the key to stack by", "type": "#/definitions/DataExtraction/definitions/StackKeyCallback" }, "value": { "description": "Callback function. Should return the data value to stack with", "type": "#/definitions/DataExtraction/definitions/StackValueCallback" } } }, "filter": { "description": "Callback function to filter the extracted data items", "optional": true, "type": "#/definitions/DataExtraction/definitions/FilterCallback" }, "sort": { "description": "Callback function to sort the extracted data items", "optional": true, "type": "#/definitions/DataExtraction/definitions/SortCallback" } }, "examples": [ "{\n extract: [{\n source: 'Products',\n field: 'Product',\n value: d => d.name,\n label: d => `<${d.name}>`\n props: {\n year: { field: 'Year' }\n num: { field: 'Sales' }\n }\n }],\n filter: d => d.label !== 'Sneakers', // extract everything except Sneakers\n sort: (a, b) => a.label > b.label ? -1 : 1, // sort descending\n}" ], "definitions": { "Extract": { "description": "Data extraction definition. Define how and what kind of data should be extracted from a `DataSource`.", "kind": "object", "entries": { "source": { "description": "Which data source to extract from", "type": "string" }, "field": { "description": "The field to extract data from", "type": "string" }, "value": { "description": "The field value accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/ValueFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" }, "label": { "description": "The field label accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/LabelFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" }, "trackBy": { "description": "Track by value accessor", "optional": true, "type": "#/definitions/DataExtraction/definitions/Extract/definitions/TrackByFn" }, "reduce": { "description": "Reducer function", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/ReduceFn" }, { "type": "string" } ], "type": "any" }, "reduceLabel": { "description": "Label reducer function", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/ReduceLabelFn" }, { "type": "string" } ], "type": "any" }, "filter": { "description": "Filter function", "optional": true, "type": "#/definitions/DataExtraction/definitions/Extract/definitions/FilterFn" }, "props": { "description": "Additional properties to add to the extracted item", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/Props" } ] } }, "examples": [ "{\n source: 'Products',\n field: 'Product',\n value: (val) => val,\n label: (val) => `<${val}>`\n props: {\n year: { field: 'Year' }\n num: { field: 'Sales' }\n }\n }" ], "definitions": { "FilterFn": { "description": "Filter callback function", "kind": "function", "params": [ { "name": "cell", "description": "The field cell", "type": "any" } ], "returns": { "type": "boolean" } }, "LabelFn": { "description": "Label callback function", "kind": "function", "params": [ { "name": "cell", "description": "The field cell", "type": "any" } ], "returns": { "type": "string" } }, "Props": { "kind": "object", "entries": { "field": { "description": "The field to extract data from", "type": "string" }, "value": { "description": "The field value accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/ValueFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" }, "label": { "description": "The field label accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/LabelFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" } }, "examples": [ "{\n field: 'Sales',\n value: (val) => Math.round(val),\n label: (val) => `<${val}>`\n}" ] }, "ReduceFn": { "description": "Reduce callback function", "kind": "function", "params": [ { "name": "values", "description": "The collected values to reduce", "kind": "array", "items": { "type": "any" } } ], "returns": { "type": "any" } }, "ReduceLabelFn": { "description": "ReduceLabel callback function", "kind": "function", "params": [ { "name": "labels", "description": "The collected labels to reduce", "kind": "array", "items": { "type": "any" } }, { "name": "value", "description": "Reduced value", "type": "any" } ], "returns": { "type": "string" } }, "TrackByFn": { "description": "TrackBy callback function", "kind": "function", "params": [ { "name": "cell", "description": "The field cell", "type": "any" } ], "returns": { "type": "any" } }, "ValueFn": { "description": "Value callback function", "kind": "function", "params": [ { "name": "cell", "description": "The field cell", "type": "any" } ], "returns": { "type": "any" } } } }, "FilterCallback": { "description": "Callback function to filter the extracted data items", "kind": "function", "params": [ { "name": "datum", "description": "The extracted datum", "type": "#/definitions/DatumExtract" } ], "returns": { "description": "Return true if the datum should be included in the final data set", "type": "boolean" } }, "SortCallback": { "description": "Callback function to sort the extracted data items", "kind": "function", "params": [ { "name": "a", "description": "The extracted datum", "type": "#/definitions/DatumExtract" }, { "name": "b", "description": "The extracted datum", "type": "#/definitions/DatumExtract" } ], "returns": { "description": "If less than 0, sort a before b. If greater than 0, sort b before a", "type": "number" } }, "StackKeyCallback": { "description": "Callback function. Should return the key to stack by", "kind": "function", "params": [ { "name": "datum", "description": "The extracted datum", "type": "#/definitions/DatumExtract" } ], "returns": { "description": "The data value to stack by", "type": "any" } }, "StackValueCallback": { "description": "Callback function. Should return the data value to stack with", "kind": "function", "params": [ { "name": "datum", "description": "The extracted datum", "type": "#/definitions/DatumExtract" } ], "returns": { "description": "The data value to stack with", "type": "any" } } } }, "DataFieldExtraction": { "kind": "object", "entries": { "source": { "description": "Which data source to extract from", "type": "string" }, "field": { "description": "The field to extract data from", "type": "string" }, "value": { "description": "The field value accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/ValueFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" }, "label": { "description": "The field label accessor", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract/definitions/LabelFn" }, { "type": "string" }, { "type": "number" }, { "type": "boolean" } ], "type": "any" } }, "examples": [ "{\n source: 'Products',\n field: 'Sales',\n value: (val) => Math.round(val),\n label: (val) => `<${val}>`\n}" ] }, "Dataset": { "kind": "interface", "params": [], "entries": { "extract": { "description": "Extract data items from this dataset", "kind": "function", "params": [ { "name": "config", "kind": "union", "items": [ { "type": "#/definitions/DataExtraction/definitions/Extract" }, { "type": "#/definitions/DataFieldExtraction" } ], "type": "any" } ], "returns": { "kind": "array", "items": { "type": "#/definitions/DatumExtract" } } }, "field": { "description": "Find a field within this dataset", "kind": "function", "params": [ { "name": "query", "description": "The field to find", "type": "string" } ], "returns": { "type": "#/definitions/Field" } }, "fields": { "description": "Get all fields within this dataset", "kind": "function", "params": [], "returns": { "kind": "array", "items": { "type": "#/definitions/Field" } } }, "hierarchy": { "kind": "function", "params": [], "returns": { "type": "null" } }, "key": { "description": "Get the key identifying this dataset", "kind": "function", "params": [], "returns": { "type": "string" } }, "raw": { "description": "Get the raw data", "kind": "function", "params": [], "returns": { "type": "any" } } } }, "DataSource": { "kind": "object", "entries": { "key": { "description": "Unique identifier for this data source", "optional": true, "type": "string" }, "type": { "description": "The dataset type", "type": "string" }, "data": { "description": "Data", "type": "any" } } }, "datumAccessor": { "description": "Callback function", "kind": "function", "params": [ { "name": "d", "description": "datum", "type": "#/definitions/DatumExtract" } ], "examples": [ "(d) => Math.min(0, d.value);" ] }, "DatumBoolean": { "description": "Custom type that is either a boolean, DatumConfig or a datumAccessor", "kind": "union", "items": [ { "type": "boolean" }, { "type": "#/definitions/DatumConfig" }, { "type": "#/definitions/datumAccessor" } ], "type": "any" }, "DatumConfig": { "kind": "object", "entries": { "scale": { "description": "Name of a scale", "optional": true, "type": "string" }, "fn": { "optional": true, "type": "#/definitions/datumAccessor" }, "ref": { "description": "A reference to a DatumExtract property", "optional": true, "type": "string" } }, "examples": [ "// Implicitly resolve the datum by passing a referenced data through the scale\n{\n scale: '<name-of-scale>',\n ref: '<data-property>'\n}\n\n// or explicitly resolve the datum using callback function\n{\n fn: (d) => Math.min(0, d.datum.x.value);\n}" ] }, "DatumExtract": { "kind": "object", "entries": { "value": { "description": "The extracted value", "type": "any" }, "label": { "description": "The extracted value as a string", "type": "string" }, "source": { "description": "The data source of the extracted data", "kind": "object", "entries": { "key": { "description": "The data-source key", "type": "string" }, "field": { "description": "The source field", "type": "string" } } } } }, "DatumNumber": { "description": "Custom type that is either a number, DatumConfig or a datumAccessor", "kind": "union", "items": [ { "type": "number" }, { "type": "#/definitions/DatumConfig" }, { "type": "#/definitions/datumAccessor" } ], "type": "any" }, "DatumString": { "description": "Custom type that is either a string, DatumConfig or a datumAccessor", "kind": "union", "items": [ { "type": "string" }, { "type": "#/definitions/DatumConfig" }, { "type": "#/definitions/datumAccessor" } ], "type": "any" }, "DockLayoutSettings": { "description": "Dock layout settings", "kind": "object", "entries": { "logicalSize": { "description": "Logical size", "optional": true, "kind": "object", "entries": { "width": { "description": "Width in pixels", "optional": true, "type": "number" }, "height": { "description": "Height in pixels", "optional": true, "type": "number" }, "preserveAspectRatio": { "description": "If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )", "optional": true, "defaultValue": false, "type": "boolean" }, "align": { "description": "Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true", "optional": true, "defaultValue": 0.5, "type": "number" } } }, "center": { "description": "Define how much space the center dock area requires", "optional": true, "kind": "object", "entries": { "minWidthRatio": { "description": "Value between 0 and 1", "optional": true, "defaultValue": 0.5, "type": "number" }, "minHeightRatio": { "description": "Value between 0 and 1", "optional": true, "defaultValue": 0.5, "type": "number" }, "minWidth": { "description": "Width in pixels", "optional": true, "type": "number" }, "minHeight": { "description": "Height in pixels", "optional": true, "type": "number" } } }, "layoutModes": { "description": "Dictionary with named sizes", "optional": true, "type": "object", "generics": [ { "type": "string" }, { "type": "#/definitions/DockLayoutSettings/definitions/LayoutMode" } ] }, "size": { "description": "Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height", "optional": true, "kind": "object", "entries": { "width": { "description": "Width in pixels", "optional": true, "type": "number" }, "height": { "description": "Height in pixels", "optional": true, "type": "number" } } } }, "definitions": { "LayoutMode": { "kind": "object", "entries": { "width": { "type": "number" }, "height": { "type": "number" } } } } }, "Field": { "kind": "object", "entries": { "formatter": { "description": "Returns a formatter adapted to the content of this field.", "kind": "function", "params": [] }, "id": { "description": "Returns this field's id", "kind": "function", "params": [], "returns": { "type": "string" } }, "items": { "description": "Returns the values of this field.", "kind": "function", "params": [], "returns": { "kind": "array", "items": { "type": "#/definitions/DatumExtract" } } }, "key": { "description": "Returns this field's key", "kind": "function", "params": [], "returns": { "type": "string" } }, "max": { "description": "Returns the max value of this field.", "kind": "function", "params": [], "returns": { "type": "number" } }, "min": { "description": "Returns the min value of this field.", "kind": "function", "params": [], "returns": { "type": "number" } }, "raw": { "description": "Returns the input data", "kind": "function", "params": [], "returns": { "type": "any" } }, "tags": { "description": "Returns the tags.", "kind": "function", "params": [], "returns": { "kind": "array", "items": { "type": "string" } } }, "title": { "description": "Returns this field's title.", "kind": "function", "params": [], "returns": { "type": "string" } }, "type": { "description": "Returns this field's type: 'dimension' or 'measure'.", "kind": "function", "params": [], "returns": { "type": "string" } } } }, "formatter": { "kind": "function", "params": [], "returns": { "description": "Returns a formatted value", "type": "any" } }, "FormatterDefinition": { "kind": "object", "entries": { "formatter": { "description": "Name of the formatter", "optional": true, "type": "string" }, "type": { "description": "Type of formatter", "optional": true, "type": "string" }, "format": { "description": "Format string", "optional": true, "type": "string" }, "data": { "description": "The data to create formatter from", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction" }, { "type": "#/definitions/DataFieldExtraction" } ], "type": "any" } } }, "Geopolygon": { "kind": "object", "entries": { "polygons": { "description": "Array of polygons", "kind": "array", "items": { "type": "#/definitions/Polygon" } } } }, "Interaction": { "description": "Interaction instance", "kind": "object", "entries": { "on": { "description": "Enable interaction", "type": "function" }, "off": { "description": "Disable interaction", "type": "function" }, "destroy": { "description": "Destroy interaction", "type": "function" }, "key": { "description": "Interaction identifier", "type": "string" } } }, "InteractionSettings": { "kind": "interface", "entries": { "type": { "description": "Type of interaction handler", "type": "string" }, "key": { "description": "Unique key identifying the handler", "optional": true, "type": "string" }, "enable": { "description": "Enable or disable the interaction handler. If a callback function is provided, it must return either true or false", "kind": "union", "items": [ { "type": "function" }, { "type": "boolean" } ], "type": "any" } }, "examples": [ "{\n type: 'native',\n key: 'nativeHandler',\n enable: () => true,\n events: { // \"events\" is a property specific to the native handler\n mousemove: (e) => console.log('mousemove', e),\n }\n}" ] }, "Line": { "kind": "object", "entries": { "x1": { "description": "Start x-coordinate", "type": "number" }, "y1": { "description": "Start y-coordinate", "type": "number" }, "x2": { "description": "End x-coordinate", "type": "number" }, "y2": { "description": "End y-coordinate", "type": "number" } } }, "Path": { "kind": "object", "entries": { "d": { "description": "Path definition", "type": "string" } } }, "plugin": { "description": "Callback function to register a plugin", "kind": "function", "params": [ { "name": "registries", "type": "#/definitions/Registries" }, { "name": "options", "type": "object" } ] }, "Point": { "kind": "object", "entries": { "x": { "description": "X-coordinate", "type": "number" }, "y": { "description": "Y-coordinate", "type": "number" } } }, "Polygon": { "kind": "object", "entries": { "points": { "description": "Array of connected points", "kind": "array", "items": { "type": "#/definitions/Point" } } } }, "Polyline": { "kind": "object", "entries": { "points": { "description": "Array of connected points", "kind": "array", "items": { "type": "#/definitions/Point" } } } }, "ProgressiveObject": { "description": "A format to represent a data chunk to be rendered.", "stability": "experimental", "kind": "object", "entries": { "start": { "description": "Start index of a data chunk.", "type": "number" }, "end": { "description": "End index of a data chunk.", "type": "number" }, "isFirst": { "description": "If it is the first data chunk rendered. This helps to clear a canvas before rendering.", "type": "boolean" }, "isLast": { "description": "If it is the last data chunk rendered. This helps to update other components depending on a component with progressive rendering.", "type": "boolean" } } }, "Rect": { "kind": "object", "entries": { "x": { "description": "X-coordinate", "type": "number" }, "y": { "description": "Y-coordinate", "type": "number" }, "width": { "description": "Width", "type": "number" }, "height": { "description": "Height", "type": "number" } } }, "Registries": { "kind": "object", "entries": { "component": { "description": "Component registry", "type": "#/definitions/registry" }, "data": { "description": "Data registry", "type": "#/definitions/registry" }, "formatter": { "description": "Formatter registry", "type": "#/definitions/registry" }, "interaction": { "description": "Interaction registry", "type": "#/definitions/registry" }, "renderer": { "description": "Renderer registry", "type": "#/definitions/registry" }, "scale": { "description": "Scale registry", "type": "#/definitions/registry" } } }, "registry": { "description": "Register a `value` with the given `key`. If `value` is omitted, returns the `value` of `key`.", "kind": "function", "params": [ { "name": "key", "description": "Name of the type to register", "type": "string" }, { "name": "value", "description": "Value to store in the registry.", "optional": true, "type": "any" } ], "returns": { "description": "Registered value", "type": "any" } }, "Renderer": { "kind": "interface", "params": [], "entries": { "appendTo": { "kind": "function", "params": [ { "name": "element", "description": "Element to attach renderer to", "type": "HTMLElement" } ], "returns": { "description": "Root element of the renderer", "type": "HTMLElement" } }, "clear": { "description": "Clear all child elements from the renderer root element", "kind": "function", "params": [], "returns": { "description": "The renderer instance", "type": "#/definitions/Renderer" } }, "destory": { "description": "Remove the renderer root element from its parent element", "kind": "function", "params": [] }, "element": { "description": "Get the element this renderer is attached to", "kind": "function", "params": [], "returns": { "type": "HTMLElement" } }, "findShapes": { "description": "Get all nodes matching the provided selector", "kind": "function", "params": [ { "name": "selector", "description": "CSS selector [type, attribute, universal, class]", "type": "string" } ], "returns": { "description": "Array of objects containing matching nodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } } }, "itemsAt": { "description": "Get nodes renderer at area", "kind": "function", "params": [ { "name": "geometry", "description": "Get nodes that intersects with geometry", "kind": "union", "items": [ { "type": "#/definitions/Point" }, { "type": "#/definitions/Circle" }, { "type": "#/definitions/Rect" }, { "type": "#/definitions/Line" }, { "type": "#/definitions/Polygon" }, { "type": "#/definitions/Geopolygon" } ], "type": "any" } ], "returns": { "kind": "array", "items": { "type": "#/definitions/SceneNode" } } }, "measureText": { "kind": "function", "params": [ { "name": "opts", "kind": "object", "entries": { "text": { "description": "Text to measure", "type": "string" }, "fontSize": { "description": "Font size", "type": "string" }, "fontFamily": { "description": "Font family", "type": "string" } } } ], "returns": { "description": "Width and height of text", "type": "object" }, "examples": [ "measureText({\n text: 'my text',\n fontSize: '12px',\n fontFamily: 'Arial'\n}); // returns { width: 20, height: 12 }" ] }, "render": { "kind": "function", "params": [ { "name": "nodes", "description": "Nodes to render", "kind": "array", "items": { "type": "object" } } ], "returns": { "description": "True if the nodes were rendered, otherwise false", "type": "boolean" } }, "root": { "description": "Get the root element of the renderer", "kind": "function", "params": [], "returns": { "type": "HTMLElement" } }, "settings": { "description": "Set or Get renderer settings", "kind": "function", "params": [ { "name": "settings", "description": "Settings for the renderer", "optional": true, "type": "object" } ] }, "size": { "description": "Set or Get the size definition of the renderer container.", "kind": "function", "params": [ { "name": "opts", "description": "Size definition", "optional": true, "type": "#/definitions/Renderer/definitions/SizeDefinition" } ], "returns": { "description": "The current size definition", "type": "#/definitions/Renderer/definitions/SizeDefinition" } } }, "definitions": { "SizeDefinition": { "kind": "object", "entries": { "x": { "description": "x-coordinate", "optional": true, "type": "number" }, "y": { "description": "y-coordinate", "optional": true, "type": "number" }, "width": { "description": "Width", "optional": true, "type": "number" }, "height": { "description": "Height", "optional": true, "type": "number" }, "scaleRatio": { "optional": true, "kind": "object", "entries": { "x": { "description": "Scale ratio on x-axis", "optional": true, "type": "number" }, "y": { "description": "Scale ratio on y-axis", "optional": true, "type": "number" } } }, "margin": { "optional": true, "kind": "object", "entries": { "left": { "description": "Left margin", "optional": true, "type": "number" }, "top": { "description": "Top margin", "optional": true, "type": "number" } } } } } } }, "RendererSettings": { "stability": "experimental", "kind": "object", "entries": { "transform": { "description": "Setting for applying transform without re-rendering the whole component completely.", "optional": true, "type": "#/definitions/RendererSettings/definitions/TransformFunction" }, "canvasBufferSize": { "description": "Specifies the size of buffer canvas (used together with transform setting).", "optional": true, "type": "#/definitions/RendererSettings/definitions/CanvasBufferSize" }, "progressive": { "description": "Setting for applying progressive rendering to a canvas renderer", "optional": true, "type": "#/definitions/RendererSettings/definitions/Progressive" }, "disableScreenReader": { "description": "Setting to disable the screen reader for the component. If set to true, screen reader support will be disabled. This setting is not relevant when using the canvas renderer.", "optional": true, "defaultValue": false, "type": "boolean" } }, "definitions": { "CanvasBufferSize": { "description": "An object containing width and height of the canvas buffer or a function returning an object on that format.\nGets a rect object as input parameter.", "stability": "experimental", "kind": "union", "items": [ { "type": "function" }, { "type": "object" } ], "type": "any" }, "Progressive": { "description": "A function which returns either (1) false (to specify no progressive rendering used) or an object specifing the data chunk rendered.\n This is only applied to a canvas renderer.", "stability": "experimental", "kind": "function", "params": [], "returns": { "kind": "union", "items": [ { "type": "#/definitions/ProgressiveObject" }, { "type": "boolean" } ], "type": "any" } }, "TransformFunction": { "description": "Should return a transform object if transformation should be applied, otherwise undefined or a falsy value.\nTransforms can be applied with the canvas, svg and dom renderer.\nTransform is applied when running chart.update, see example.\n!Important: When a transform is applied to a component, the underlaying node representations are not updated with the new positions/sizes, which\ncan cause problems for operations that relies on the positioning of the shapes/nodes (such as tooltips, selections etc). An extra chart update\nwithout a transform is therefore needed to make sure the node position information is in sync with the visual representation again.", "stability": "experimental", "kind": "function", "params": [], "returns": { "type": "#/definitions/TransformObject" }, "examples": [ "const pointComponentDef = {\n type: 'point',\n rendererSettings: {\n tranform() {\n if(shouldApplyTransform) {\n return {\n horizontalScaling: 1,\n horizontalSkewing: 0,\n verticalSkewing: 0,\n verticalScaling: 1,\n horizontalMoving: x,\n verticalMoving: y\n };\n }\n }\n }\n data: {\n// ............\n\nchart.update({ partialData: true });" ] } } }, "Scale": { "description": "Scale instance", "kind": "interface", "entries": { "type": { "description": "Type of scale", "type": "string" } } }, "ScaleBand": { "kind": "object", "entries": { "type": { "optional": true, "defaultValue": "'band'", "type": "string" }, "padding": { "description": "Sets both inner and outer padding to the same value", "optional": true, "defaultValue": 0, "type": "number" }, "paddingInner": { "description": "Inner padding", "optional": true, "defaultValue": 0, "type": "number" }, "paddingOuter": { "description": "Outer padding", "optional": true, "defaultValue": 0, "type": "number" }, "align": { "description": "Control how the outer padding should be distributed, where 0.5 would distribute the padding equally on both sides", "optional": true, "defaultValue": 0.5, "type": "number" }, "invert": { "description": "Invert the output range", "optional": true, "defaultValue": false, "type": "boolean" }, "maxPxStep": { "description": "Explicitly limit the bandwidth to a pixel value", "optional": true, "type": "number" }, "label": { "description": "Callback label function, applied on each datum", "optional": true, "type": "function" }, "value": { "description": "Callback value function, applied on each datum", "optional": true, "type": "function" }, "range": { "description": "Set range explicitly (ignored when maxPxStep takes effect)", "optional": true, "defaultValue": "[0, 1]", "kind": "union", "items": [ { "kind": "array", "items": { "type": "number" } }, { "type": "function" } ], "type": "any" } } }, "ScaleCategoricalColor": { "kind": "object", "entries": { "type": { "optional": true, "defaultValue": "'categorical-color'", "type": "string" }, "range": { "description": "CSS color values of the output range", "optional": true, "defaultValue": false, "kind": "array", "items": { "type": "string" } }, "unknown": { "description": "Value to return when input value is unknown", "optional": true, "type": "string" }, "explicit": { "description": "Explicitly bind values to an output", "optional": true, "kind": "object", "entries": { "domain[]": { "description": "Values to bind", "optional": true, "kind": "array", "items": { "type": "object" } }, "range[]": { "description": "Output range", "optional": true, "kind": "array", "items": { "type": "string" } } } } } }, "ScaleDefinition": { "description": "Definition for creating a scale. Additional properties, specific for a type of scale, can be added as key/value pairs", "kind": "object", "entries": { "type": { "description": "Type of scale", "optional": true, "type": "string" }, "data": { "description": "Data configuration", "optional": true, "kind": "union", "items": [ { "type": "#/definitions/DataExtraction" }, { "type": "#/definitions/DataFieldExtraction" } ], "type": "any" } } }, "ScaleLinear": { "kind": "object", "entries": { "type": { "optional": true, "defaultValue": "'linear'", "type": "string" }, "expand": { "description": "Expand the output range", "optional": true, "type": "number" }, "invert": { "description": "Invert the output range", "optional": true, "defaultValue": false, "type": "boolean" }, "include": { "description": "Include specified numbers in the output range", "optional": true, "kind": "array", "items": { "type": "number" } }, "ticks": { "optional": true, "kind": "object", "entries": { "tight": { "optional": true, "defaultValue": false, "type": "boolean" }, "forceBounds": { "optional": true, "defaultValue": false, "type": "boolean" }, "distance": { "description": "Approximate distance between each tick", "optional": true, "defaultValue": 100, "type": "number" }, "values": { "description": "If set, ticks are no longer generated but instead equal to this set", "optional": true, "kind": "union", "items": [ { "kind": "array", "items": { "type": "number" } }, { "kind": "array", "items": { "type": "object" } } ], "type": "any" }, "count": { "optional": true, "type": "number" } } }, "minorTicks": { "optional": true, "kind": "object", "entries": { "count": { "optional": true, "defaultValue": 3, "type": "number" } } }, "min": { "description": "Set an explicit minimum value", "optional": true, "type": "number" }, "max": { "description": "Set an explicit maximum value", "optional": true, "type": "number" } } }, "ScaleSequentialColor": { "kind": "object", "entries": { "type": { "optional": true, "defaultValue": "'sequential-color'", "type": "string" }, "range": { "description": "CSS color values of the output range", "optional": true, "kind": "array", "items": { "type": "string" } }, "invert": { "description": "Invert range", "optional": true, "defaultValue": false, "type": "boolean" }, "min": { "description": "Set an explicit minimum value", "optional": true, "type": "number" }, "max": { "description": "Set an explicit maximum value", "optional": true, "type": "number" } } }, "ScaleThresholdColor": { "kind": "object", "entries": { "type": { "optional": true, "defaultValue": "'threshold-color'", "type": "string" }, "domain": { "description": "Values defining the thresholds", "optional": true, "kind": "array", "items": { "type": "number" } }, "range": { "description": "CSS color values of the output range", "optional": true, "kind": "array", "items": { "type": "string" } }, "invert": { "description": "Invert range", "optional": true, "defaultValue": false, "type": "boolean" }, "min": { "description": "Set an explicit minimum value", "optional": true, "type": "number" }, "max": { "description": "Set an explicit maximum value", "optional": true, "type": "number" }, "nice": { "description": "If set to true, will generate 'nice' domain values. Ignored if domain is set.", "optional": true, "defaultValue": false, "type": "boolean" } } }, "SceneNode": { "description": "Read-only object representing a node on the scene.", "kind": "class", "constructor": { "kind": "function", "params": [] }, "entries": { "attrs": { "description": "Node attributes", "kind": "object", "entries": {} }, "bounds": { "description": "Bounding rectangle of the node. After any transform has been applied, if any, but excluding scaling transform related to devicePixelRatio.\nOrigin is in the top-left corner of the scene element.", "type": "#/definitions/Rect" }, "boundsRelativeTo": { "description": "Bounding rectangle of the node, relative a target.\n\nIf target is an HTMLElement, the bounds are relative to the HTMLElement.\nAny other target type will return the bounds relative to the viewport of the browser.", "kind": "function", "params": [ { "name": "target", "kind": "union", "items": [ { "type": "HTMLElement" }, { "type": "any" } ], "type": "any" }, { "name": "includeTransform", "description": "Whether to include any applied transforms on the node", "defaultValue": true, "type": "boolean" } ], "returns": { "type": "#/definitions/Rect" }, "examples": [ "node.boundsRelativeTo($('div'));\nnode.boundsRelativeTo('viewport');" ] }, "children": { "description": "Get child nodes", "kind": "array", "items": { "type": "#/definitions/SceneNode" } }, "collider": { "description": "Collider of the node. Transform on the node has been applied to the collider shape, if any, but excluding scaling transform related to devicePixelRatio.\nOrigin is in the top-left corner of the scene element.\n\nIf node has no collider, null is returned.", "kind": "union", "items": [ { "type": "#/definitions/Line" }, { "type": "#/definitions/Rect" }, { "type": "#/definitions/Circle" }, { "type": "#/definitions/Path" } ], "type": "any" }, "data": { "description": "Get the associated data", "type": "any" }, "desc": { "description": "Node description", "kind": "object", "entries": {} }, "element": { "description": "Element the scene is attached to", "type": "HTMLElement" }, "key": { "description": "Key of the component this shape belongs to", "type": "string" }, "localBounds": { "description": "Bounding rectangle of the node within its local coordinate system.\nOrigin is in the top-left corner of the scene element.", "type": "#/definitions/Rect" }, "parent": { "description": "Get parent node", "type": "#/definitions/SceneNode" }, "tag": { "description": "Node tag", "type": "string" }, "type": { "description": "Node type", "type": "string" } } }, "svgRendererFactory": { "description": "Create a new svg renderer", "kind": "function", "params": [ { "name": "treeFactory", "description": "Node tree factory", "optional": true, "type": "function" }, { "name": "ns", "description": "Namespace definition", "optional": true, "type": "string" }, { "name": "sceneFn", "description": "Scene factory", "optional": true, "type": "function" } ], "returns": { "description": "A svg renderer instance", "type": "#/definitions/Renderer" } }, "TransformObject": { "description": "A format to represent a transformation.", "kind": "object", "entries": { "horizontalScaling": { "type": "number" }, "horizontalSkewing": { "type": "number" }, "verticalSkewing": { "type": "number" }, "verticalScaling": { "type": "number" }, "horizontalMoving": { "type": "number" }, "verticalMoving": { "type": "number" } } } }}