-
-
Save Jkker/4042ab5a4b42ddb4e0dd06555cae9767 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "http://json-schema.org/draft-07/schema#", | |
| "type": "object", | |
| "properties": { | |
| "param": { | |
| "type": "object", | |
| "properties": { | |
| "range": { | |
| "anyOf": [ | |
| { | |
| "type": "string", | |
| "const": "today" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "last_7_days" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "last_14_days" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "last_30_days" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "last_year" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "last_3_years" | |
| }, | |
| { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "today", | |
| "last_7_days", | |
| "last_14_days", | |
| "last_30_days", | |
| "last_year", | |
| "last_3_years" | |
| ] | |
| } | |
| } | |
| ] | |
| }, | |
| "granularity": { | |
| "anyOf": [ | |
| { | |
| "type": "string", | |
| "const": "hour" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "day" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "week" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "month" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "day_of_week" | |
| }, | |
| { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "hour", | |
| "day", | |
| "week", | |
| "month", | |
| "day_of_week" | |
| ] | |
| } | |
| } | |
| ] | |
| }, | |
| "metrics": { | |
| "anyOf": [ | |
| { | |
| "type": "string", | |
| "const": "sale.receiptCount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.grossRevenue" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.discountAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.loyaltyAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.gratuityAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.taxAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.tipAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.giftcardAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.giftcardCount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "sale.itemCostAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "refund.receiptCount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "refund.totalAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "storecredit.totalAmount" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "netsale.revenue" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "netsale.totalAmount" | |
| }, | |
| { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "sale.receiptCount", | |
| "sale.grossRevenue", | |
| "sale.discountAmount", | |
| "sale.loyaltyAmount", | |
| "sale.gratuityAmount", | |
| "sale.taxAmount", | |
| "sale.tipAmount", | |
| "sale.giftcardAmount", | |
| "sale.giftcardCount", | |
| "sale.itemCostAmount", | |
| "refund.receiptCount", | |
| "refund.totalAmount", | |
| "storecredit.totalAmount", | |
| "netsale.revenue", | |
| "netsale.totalAmount" | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Initial parameters for the controller.", | |
| "example": "```ts\n{ range: 'today', metrics: 'sale.grossRevenue' }\n```" | |
| }, | |
| "param_options": { | |
| "type": "object", | |
| "properties": { | |
| "range": { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "today", | |
| "last_7_days", | |
| "last_14_days", | |
| "last_30_days", | |
| "last_year", | |
| "last_3_years" | |
| ] | |
| } | |
| }, | |
| "granularity": { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "hour", | |
| "day", | |
| "week", | |
| "month", | |
| "day_of_week" | |
| ] | |
| } | |
| }, | |
| "metrics": { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "sale.receiptCount", | |
| "sale.grossRevenue", | |
| "sale.discountAmount", | |
| "sale.loyaltyAmount", | |
| "sale.gratuityAmount", | |
| "sale.taxAmount", | |
| "sale.tipAmount", | |
| "sale.giftcardAmount", | |
| "sale.giftcardCount", | |
| "sale.itemCostAmount", | |
| "refund.receiptCount", | |
| "refund.totalAmount", | |
| "storecredit.totalAmount", | |
| "netsale.revenue", | |
| "netsale.totalAmount" | |
| ] | |
| } | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Controller parameter options", | |
| "remarks": "This field allows end user to interact with the widget and adjust parameters. If no user interaction is needed, set this to undefined.\nThere are two forms: simple one and full spec\nThe simple one is a string array, which provides list of options that user can select from.\nMore complex case should use full spec ParamOption to give detail of how user can interact with the parameter control.", | |
| "example": "```js\n{ metrics: ['sale.grossRevenue', 'sale.taxAmount'] }\n```\n\ndisplays a control for selecting metrics from gross revenue and tax." | |
| }, | |
| "onParamChange": { | |
| "type": "null", | |
| "readOnly": true, | |
| "examples": [ | |
| " (\n name: string,\n preparam: {\n [K in keyof P]?: OneOrMany<TypeOfParamOption<P[K]>>\n },\n newparam: {\n [K in keyof P]?: OneOrMany<TypeOfParamOption<P[K]>>\n },\n ) => void" | |
| ], | |
| "description": "Callback function triggered when a parameter value changes." | |
| }, | |
| "controller": { | |
| "type": "object", | |
| "properties": { | |
| "title": { | |
| "type": "string" | |
| }, | |
| "subtitle": { | |
| "type": "string" | |
| }, | |
| "controls": { | |
| "type": "object", | |
| "additionalProperties": { | |
| "type": "object", | |
| "properties": { | |
| "label": { | |
| "type": "string" | |
| }, | |
| "enable": { | |
| "type": "boolean" | |
| }, | |
| "type": { | |
| "type": "string", | |
| "enum": [ | |
| "select", | |
| "date_range_picker", | |
| "filter", | |
| "custom" | |
| ] | |
| }, | |
| "options": { | |
| "anyOf": [ | |
| { | |
| "type": "array", | |
| "items": { | |
| "type": "object", | |
| "properties": { | |
| "name": { | |
| "type": "string" | |
| }, | |
| "value": { | |
| "type": [ | |
| "string", | |
| "number", | |
| "boolean" | |
| ] | |
| } | |
| }, | |
| "required": [ | |
| "name", | |
| "value" | |
| ], | |
| "additionalProperties": false, | |
| "description": "Defines selection options within parameter controls." | |
| } | |
| }, | |
| { | |
| "type": "object" | |
| } | |
| ] | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Options for configuring a single control or a group of controls." | |
| }, | |
| "description": "Multiple Controls Option Describes options for configuring multiple controls in a controller.", | |
| "typeParam": "K - Key type of the controls." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Options for configuring the controller.", | |
| "remarks": "Used by widget developers to set up complex parameter controllers.\nThese options are generally not exposed to widget users." | |
| }, | |
| "title": { | |
| "type": "string" | |
| }, | |
| "chart": { | |
| "type": "object", | |
| "properties": { | |
| "type": { | |
| "anyOf": [ | |
| { | |
| "type": "string", | |
| "const": "area" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "line" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "pie" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "stacked_area" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "stacked_bar" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "bar" | |
| }, | |
| { | |
| "type": "string", | |
| "const": "column" | |
| }, | |
| { | |
| "type": "array", | |
| "items": { | |
| "type": "string", | |
| "enum": [ | |
| "area", | |
| "line", | |
| "pie", | |
| "stacked_area", | |
| "stacked_bar", | |
| "bar", | |
| "column" | |
| ] | |
| } | |
| } | |
| ], | |
| "description": "Specifies the type of chart.", | |
| "remarks": "This option allows the selection between different chart styles like line charts, area charts, pie charts, etc.\nWhen the chart type is an array, chart type selection buttons are displayed, allowing the user to choose the chart type dynamically.", | |
| "defaultValue": "line" | |
| }, | |
| "variant": { | |
| "type": "string", | |
| "enum": [ | |
| "bare", | |
| "unstyled", | |
| "standard", | |
| "talech" | |
| ], | |
| "description": "Determines the visual style variant of the chart.", | |
| "remarks": "Variants include 'bare', 'unstyled', 'standard', and 'talech', each offering a different visual presentation.\n- 'bare': A minimalistic variant displaying only the chart, without axes, legends, or titles. Suitable for quick trend displays.\n- 'unstyled': A basic, plain chart with transparent background and minimal styling, ideal for embedding in components.\n- 'standard': The default style for general web page usage.\n- 'talech': A specific style available only for bar charts, resembling the talech web bar chart for total summaries.", | |
| "defaultValue": "unstyled" | |
| }, | |
| "colorScheme": { | |
| "type": "string", | |
| "description": "Name of the color scheme to apply to the chart data.", | |
| "remarks": "The color scheme is inherited from the widget's top-level setting by default,\nbut can be overridden at the chart level for more specific customization." | |
| }, | |
| "colors": { | |
| "type": "array", | |
| "items": { | |
| "type": "string" | |
| }, | |
| "description": "Defines a custom list of colors for the chart.", | |
| "remarks": "In addition to predefined color schemes, users can specify a palette of colors for the chart.\nThis is useful for customizing colors of specific chart elements.", | |
| "example": "```tsx\n<SalesReportByGroupCard\n w=\"400px\"\n param={{\n range: \"last_30_days\",\n groupBy: \"orderType\",\n metrics: [\"sale.receiptCount\", \"sale.grossRevenue\"],\n }}\n chart={{\n colors: [\"#f27026\", \"#e8b28f\", \"#08649b\", \"#519954\", \"#a3b1cd\", \"#4a3526\"],\n }}\n/>\n```" | |
| }, | |
| "legend": { | |
| "type": "object", | |
| "properties": { | |
| "enabled": { | |
| "type": "boolean", | |
| "description": "Determines the visibility of the chart legend.\n- `true`: Always display the legend.\n- `false`: Hide the legend.\n- `undefined`: Auto-hide for single series charts and display for multiple series charts.", | |
| "defaultValue": "`undefined`" | |
| }, | |
| "type": { | |
| "type": "string", | |
| "const": "comparator", | |
| "description": "Specifies a non-default legend style. Currently, only 'comparator' type is supported, offering a unique legend configuration for comparative analysis." | |
| }, | |
| "comparator": { | |
| "type": "object", | |
| "properties": { | |
| "maxSeries": { | |
| "type": "number", | |
| "description": "Limits the maximum number of series that can be compared." | |
| }, | |
| "selectorStyle": { | |
| "type": "string", | |
| "enum": [ | |
| "narrow", | |
| "wide" | |
| ], | |
| "description": "Style of the series selector in the comparator legend.\n- 'narrow': Displays a button leading to a modal with vertical arrangement.\n- 'wide': Arranges selectors in parallel, suitable for broader views.", | |
| "defaultValue": "wide" | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Options specific to the 'comparator' legend type." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Options for controlling the chart legend.", | |
| "remarks": "The legend settings include options like visibility and special types like 'comparator'.\nFor charts with multiple series, additional configurations are available." | |
| }, | |
| "yAxis": { | |
| "type": "object", | |
| "properties": { | |
| "endOnTick": { | |
| "type": "boolean", | |
| "description": "Determines whether the Y-axis should extend to the last tick mark." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Configuration options for the Y-axis of the chart." | |
| }, | |
| "tooltip": { | |
| "type": "object", | |
| "properties": { | |
| "enabled": { | |
| "type": "boolean", | |
| "description": "Enables or disables tooltips on the chart.", | |
| "defaultValue": true | |
| }, | |
| "outside": { | |
| "type": "boolean", | |
| "description": "When set to true, allows tooltips to be displayed outside the chart's boundary." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Options for controlling the tooltip behavior in the chart." | |
| }, | |
| "sort": { | |
| "type": "boolean", | |
| "description": "Controls whether the chart data should be sorted." | |
| }, | |
| "extension": { | |
| "type": "object", | |
| "properties": { | |
| "type": { | |
| "type": "string", | |
| "enum": [ | |
| "min", | |
| "max", | |
| "mean", | |
| "sum" | |
| ], | |
| "description": "Specifies the method of combining to create the additional series.\n- 'min': Uses the smallest value from each set of data points.\n- 'max': Uses the largest value from each set of data points.\n- 'mean': Calculates the mean of each set of data points.\n- 'sum': Adds all values from each set of data points." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Configuration for creating an additional data series derived from the combination of all other series in the chart.", | |
| "experimental": "This feature is experimental and may change in future releases." | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "description": "Chart options", | |
| "remarks": "This type provides a range of options to customize the appearance and behavior of a chart,\nincluding its type, variant, color scheme, and interactivity settings.", | |
| "public": true | |
| }, | |
| "data": { | |
| "type": "object", | |
| "properties": { | |
| "xAxis": { | |
| "type": "object", | |
| "properties": { | |
| "labels": { | |
| "type": "array", | |
| "items": { | |
| "type": "string" | |
| } | |
| }, | |
| "type": { | |
| "type": "string", | |
| "description": "Allows creating a union type by combining primitive types and literal types without sacrificing auto-completion in IDEs for the literal type part of the union.\n\nCurrently, when a union type of a primitive type is combined with literal types, TypeScript loses all information about the combined literals. Thus, when such type is used in an IDE with autocompletion, no suggestions are made for the declared literals.\n\nThis type is a workaround for [Microsoft/TypeScript#29729](https://github.com/Microsoft/TypeScript/issues/29729). It will be removed as soon as it's not needed anymore.", | |
| "example": "```\nimport type {LiteralUnion} from 'type-fest';\n\n// Before\n\ntype Pet = 'dog' | 'cat' | string;\n\nconst pet: Pet = '';\n// Start typing in your TypeScript-enabled IDE.\n// You **will not** get auto-completion for `dog` and `cat` literals.\n\n// After\n\ntype Pet2 = LiteralUnion<'dog' | 'cat', string>;\n\nconst pet: Pet2 = '';\n// You **will** get auto-completion for `dog` and `cat` literals.\n```", | |
| "category": "Type" | |
| }, | |
| "min": { | |
| "type": "string", | |
| "description": "Minimum and maxinum value to display on X Axis. If not set, should automatically adjust min, max For datetime type use ISO standard date/time format. For category, min, max are not used." | |
| }, | |
| "max": { | |
| "type": "string" | |
| }, | |
| "tickInterval": { | |
| "type": "string", | |
| "description": "Interval between data points for date time: time interval in ISO 8601 format, currently support: - x minutes: PT5M, PT10M, PT15M ... - x hour(s): PT1H For category: not used for now" | |
| }, | |
| "fixedRange": { | |
| "type": "boolean", | |
| "description": "Originally only intended for hour_of_day. Hour of day needs to be parsed as a datetime axis, but it shouldn't be scaled to min/max range or display date This can now be used for any case where we want datetime formatting but don't do any of the other dynamic parsing options" | |
| } | |
| }, | |
| "required": [ | |
| "labels" | |
| ], | |
| "additionalProperties": false | |
| }, | |
| "datasets": { | |
| "type": "array", | |
| "items": { | |
| "type": "object", | |
| "properties": { | |
| "label": { | |
| "type": "string" | |
| }, | |
| "type": { | |
| "type": "string", | |
| "enum": [ | |
| "number", | |
| "currency", | |
| "currency:${string}", | |
| "count", | |
| "datetime", | |
| "date", | |
| "percent", | |
| "long", | |
| "string", | |
| "enum", | |
| "enum+" | |
| ], | |
| "description": "Only data loader knows exactly what the data type should be. Define data type passed in chart. This data type is not defining whether data is float or integer, instead, it describes business data meaning in order to help template to handle formatting properly. We can add more data types going forward.\n\n'number': generic number value 'count': data are count of something 'currency': data are currency. default to USD. if non-USD, use currency:XXX where XXX is currency type, like currency:CAD" | |
| }, | |
| "data": { | |
| "type": "array", | |
| "items": { | |
| "type": [ | |
| "number", | |
| "null" | |
| ] | |
| }, | |
| "description": "Data array. Size and order must match labels[]" | |
| } | |
| }, | |
| "required": [ | |
| "data" | |
| ], | |
| "additionalProperties": false, | |
| "description": "Chart dataset contains data for one series." | |
| }, | |
| "description": "Data series." | |
| } | |
| }, | |
| "required": [ | |
| "xAxis", | |
| "datasets" | |
| ], | |
| "additionalProperties": false, | |
| "remarks": "Chart Data are data fetched by data loader and passed to template to display.\nIn order to decouple template from data loader, the chart data passed from\ndata loader to template should only provide essential data for displaying a chart.\nThe essential data should focus on 'data' itself.\nRich formatting and styling should be handled through theme (chart option).\nTo evaluate this: can anyone draw a plain chart (not a fancy one) correctly purely basing on the ChartData?", | |
| "internal": true | |
| }, | |
| "onChartColorChange": { | |
| "type": "null", | |
| "readOnly": true, | |
| "examples": [ | |
| " (colors: ChartOptions['colors']) => void" | |
| ], | |
| "description": "Callback function when chart colors is initialized or changed" | |
| } | |
| }, | |
| "additionalProperties": false, | |
| "definitions": {} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment