Theme Builder
Install with NPM
npm install keen-theme-builder --save
Live Demo
https://keen.github.io/theme-builder/
Usage
Use this component to create custom theme for your charts and generate JS/CSS files
Example
const options = chart: label: 'Line' value: 'line' // specifies which chart is rendered in mock-up section by default, // possible values are: // { value: 'default', label: 'Default' }, // { value: 'bar', label: 'Bar' }, // { value: 'line', label: 'Line' }, // { value: 'spline', label: 'Spline' }, // { value: 'step', label: 'Step' }, // { value: 'area', label: 'Area' }, // { value: 'pie', label: 'Pie' }, // { value: 'donut', label: 'Donut' }, // { value: 'gauge', label: 'Gauge' }, // { value: 'funnel', label: 'Funnel' }, // { value: 'funnel-3d', label: 'Funnel 3d' }, chartPalette: label: 'Dracula' value: 'dracula' // predefined color schemas, // possible values // { label: 'Autocollector', value: 'autocollector' } // { label: 'Dracula', value: 'dracula' } // { label: 'Modern', value: 'modern' } // By default it's set to 'None'. Choose colors or chartPalette as chartPalette injects predifined color scheme into colors array. isDashboardBuilderActive: false // defines which fields are hidden. For dashboard builder we hide tabs and chart types select. By default it's false colors: 'red' '#fff' 'rgb(0,0,0)' // you can provide custom color pallette, valid CSS color properties are supported. 'appearance_background': '#000' // string, valid CSS color properties are supported 'appearance_border': '#000' // string, valid CSS color properties are supported 'appearance_font_family': 'Acme' // general font, for getting current list of Google fonts please provide your Google Fonts API key in utils/consts.js 'title_show': false // by default it's false 'title_text': '' 'title_textAlign': 'left' 'title_color': '#000' // string, valid CSS color properties are supported 'title_font_family': 'Acme' 'title_font_size': '16' // string, font size in pixels // possible values // [ // { label: "Auto", value: 'auto'}, // { label: "10", value: 10 }, // { label: "12", value: 12 }, // { label: "14", value: 14 }, // { label: "16", value: 16 }, // { label: "18", value: 18 }, // { label: "20", value: 20 }, // { label: "24", value: 24 }, // { label: "30", value: 30 }, // { label: "36", value: 36 }, // ]; 'title_font_bold': false // by default it's false 'title_font_italic': false // by default it's false 'subtitle_show': false // by default it's false 'subtitle_text': '' 'subtitle_textAlign': 'center' // possible values ['left', 'right', 'center']. By default it's 'left 'subtitle_color': '#000' // string, valid CSS color properties are supported 'subtitle_font_family': 'Acme' 'subtitle_font_size': '16' 'subtitle_font_bold': false // by default it's false 'subtitle_font_italic': false // by default it's false 'axis_vertical_title_show': false // by default it's false 'axis_vertical_title_text': '' 'axis_vertical_title_textAlign': 'center' // possible values ['left', 'right', 'center']. By default it's 'left 'axis_vertical_title_color': '#000' // string, valid CSS color properties are supported 'axis_vertical_title_font_family': 'Acme' 'axis_vertical_title_font_size': '16' 'axis_vertical_title_font_bold': false // by default it's false 'axis_vertical_title_font_italic': false // by default it's false 'axis_vertical_label_show': false // by default it's false 'axis_vertical_label_color': '#000' // string, valid CSS color properties are supported 'axis_vertical_label_font_family': 'Acme' 'axis_vertical_label_font_size': '16' 'axis_vertical_label_font_bold': false // by default it's false 'axis_vertical_label_font_italic': false // by default it's false 'axis_horizontal_title_show': false // by default it's false 'axis_horizontal_title_text': '' 'axis_horizontal_title_textAlign': 'center' // possible values ['left', 'right', 'center']. By default it's 'left 'axis_horizontal_title_color': '#000' // string, valid CSS color properties are supported 'axis_horizontal_title_font_family': 'Acme' 'axis_horizontal_title_font_size': '16' 'axis_horizontal_title_font_bold': false // by default it's false 'axis_horizontal_title_font_italic': false // by default it's false 'axis_horizontal_label_show': false // by default it's false 'axis_horizontal_label_color': '#000' // string, valid CSS color properties are supported 'axis_horizontal_label_font_family': 'Acme' 'axis_horizontal_label_font_size': '16' 'axis_horizontal_label_font_bold': false // by default it's false 'axis_horizontal_label_font_italic': false // by default it's false 'legend_show': false // by default it's false 'legend_color': '#000' // string, valid CSS color properties are supported 'legend_font_family': 'Acme' 'legend_font_size': '16' 'legend_font_bold': false // by default it's false 'legend_font_italic': false // by default it's false 'legend_layout': 'left' // defines position of legend // possible values // { label: 'Top', value: 'top' }, // { label: 'Right', value: 'right' }, // { label: 'Bottom', value: 'bottom' }, // { label: 'Left', value: 'left' } 'legend_position_horizontal': '' // applies to the chart once legend_layout is set to `top` or `bottom` // possible values // { label: 'Left', value: 'left' }, // { label: 'Center', value: 'center' }, // { label: 'Right', value: 'right'} 'legend_position_vertical': '' // applies to the chart once legend_layout is set to `left` or `right` // possible values // { label: 'Top', value: 'top' }, // { label: 'Middle', value: 'middle' }, // { label: 'Bottom', value: 'bottom' } 'grid_show': false // by default it's false 'grid_lines_color': '#000' // string, valid CSS color properties are supported 'grid_lines_count': '' // possible values // { label: 'Auto', value: '' }, // { label: '1', value: 1 }, // { label: '2', value: 2 }, // { label: '3', value: 3 }, // { label: '4', value: 4 }, // { label: '5', value: 5 }, // { label: '6', value: 6 }, // { label: '7', value: 7 }, // { label: '8', value: 8 }, // { label: '9', value: 9 }, // { label: '10', value: 10 }, 'subgrid_show': false // by default it's false 'subgrid_lines_color': '#000' // string, valid CSS color properties are supported 'subgrid_lines_count': '' const onChange = { console;} <Builder options=options onChange=onChange // defines function that gets current state as an input/>