@datarailsshared/dr_renderer 1.5.107 → 1.5.114

package/src/options/constants.js

@@ -0,0 +1,268 @@
+/**
+ * @fileoverview Shared constants for chart options builders.
+ * These constants define default values for fonts, colors, and styling
+ * used across all chart option configurations.
+ * @module @datarailsshared/dr_renderer/options/constants
+ */
+
+/**
+ * Chart color palette for various UI elements.
+ * @readonly
+ * @enum {string}
+ */
+const CHART_COLORS = {
+    BACKGROUND: '#fff',
+    TEXT: '#151a41',
+    LABEL: '#cfd7dd',
+    LABEL_SECOND: '#85889c',
+    DRILL_UP_FILL: '#eef3f6',
+    DRILL_BUTTON_COLOR_FILL: 'white',
+    DRILL_BUTTON_COLOR: '#6D6E6F',
+    DRILL_BUTTON_COLOR_HOVER: '#333333',
+    PLOT_BORDER: '#606063',
+    MINOR_GRID_LINE: '#505053',
+    TICK_COLOR: '#666',
+    LABELS_OLD: '#D7D7D8',
+    DATA_LABELS: '#B0B0B3',
+    CONTRAST_TEXT: '#F0F0F3',
+    LEGEND_BACKGROUND: 'rgba(0, 0, 0, 0.5)',
+    MASK: 'rgba(255,255,255,0.3)',
+};
+
+/**
+ * Available font families for chart suboptions.
+ * @type {string[]}
+ */
+const SUBOPTIONS_FONTS = [
+    'Arial',
+    'Arial Black',
+    'Comic Sans MS',
+    'Courier New',
+    'Helvetica',
+    'Impact',
+    'Nunito Sans',
+    'Tahoma',
+    'Times New Roman',
+    'Verdana',
+    'Poppins'
+];
+
+/**
+ * Default font family for Highcharts elements.
+ * @type {string}
+ */
+const HIGHCHARTS_FONT_FAMILY = 'Poppins';
+
+/**
+ * Default font family CSS value with fallback.
+ * @type {string}
+ */
+const HIGHCHARTS_FONT_FAMILY_CSS = 'Poppins, sans-serif';
+
+/**
+ * Default settings for tooltip styling.
+ * @typedef {Object} TooltipDefaultSettings
+ * @property {string} FONT_COLOR - Default tooltip font color
+ * @property {string} FONT_SIZE - Default tooltip font size
+ * @property {string} FONT_FAMILY - Default tooltip font family
+ */
+
+/**
+ * @type {TooltipDefaultSettings}
+ */
+const TOOLTIP_DEFAULT_SETTINGS = {
+    FONT_COLOR: '#545a6b',
+    FONT_SIZE: '12',
+    FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
+};
+
+/**
+ * Default settings for label styling.
+ * @typedef {Object} LabelDefaultSettings
+ * @property {string} FONT_COLOR - Default label font color
+ * @property {string} FONT_SIZE - Default label font size
+ * @property {string} FONT_FAMILY - Default label font family
+ */
+
+/**
+ * @type {LabelDefaultSettings}
+ */
+const LABEL_DEFAULT_SETTINGS = {
+    FONT_COLOR: CHART_COLORS.TEXT,
+    FONT_SIZE: '11',
+    FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
+};
+
+/**
+ * Default label options for Highcharts data labels.
+ * @type {{ style: { fontSize: string, fontFamily: string, fontWeight: string }, color: string }}
+ */
+const LABEL_DEFAULT_OPTIONS = {
+    style: {
+        fontSize: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
+        fontFamily: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
+        fontWeight: 'normal',
+    },
+    color: LABEL_DEFAULT_SETTINGS.FONT_COLOR,
+};
+
+/**
+ * Default tooltip options for Highcharts.
+ * @type {{ borderColor: string, shadow: Object, style: Object, enabled: boolean }}
+ */
+const TOOLTIP_DEFAULT_OPTIONS = {
+    borderColor: CHART_COLORS.BACKGROUND,
+    shadow: {
+        color: '#9199b4',
+        width: 10,
+        opacity: 0.05
+    },
+    style: {
+        fontSize: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
+        fontFamily: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
+        color: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR,
+    },
+    enabled: true,
+};
+
+/**
+ * Default label for chart axis.
+ * @type {string}
+ */
+const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
+
+/**
+ * Default label for chart legend.
+ * @type {string}
+ */
+const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
+
+/**
+ * Generates font size options for select elements.
+ * Creates options from 6 to 24 (inclusive).
+ * @returns {Array<{label: number, value: number}>} Array of font size options
+ */
+const generateFontSizeOptions = () => {
+    const options = [];
+    for (let i = 0; i < 19; i++) {
+        const fontValue = i + 6;
+        options.push({ label: fontValue, value: fontValue });
+    }
+    return options;
+};
+
+/**
+ * Pre-generated font size options for suboptions select elements.
+ * @type {Array<{label: number, value: number}>}
+ */
+const SUBOPTIONS_FONT_SIZE_VALUES = generateFontSizeOptions();
+
+/**
+ * Default CSS class for suboption categories.
+ * @type {string}
+ */
+const DEFAULT_CATEGORY_CLASS = 'google-visualization-charteditor-mini-more';
+
+// ============================================================================
+// Chart Types Constants
+// ============================================================================
+
+/**
+ * Chart type string literal union.
+ * @typedef {'line-chart'|'line-chart-smooth'|'line-chart-forecast'|'column-chart'|'column-chart-stacked'|'column-chart-stacked-percent'|'combo-chart'|'combo-column-chart'|'combo-stacked-chart'|'bar-chart'|'bar-chart-stacked'|'bar-chart-stacked-percent'|'scatter-chart'|'area-chart'|'area-chart-smooth'|'table_only'|'polygon-chart'|'pie-chart'|'pie-chart-drilldown'|'gauge-solid-chart'|'gauge-chart'|'gauge-chart-enhanced'|'gauge-chart-dynamic-goal'|'gauge-chart-categories-summary'|'kpi-widget'|'smart-kpi'|'text-widget'|'waterfall-chart-breakdown'|'waterfall-chart-walkthrough'|'published_item'|'rich_text'|'excel_viewer'|'donut-chart'} ChartTypeValue
+ */
+
+/**
+ * Chart types object type.
+ * @typedef {Object} ChartTypesMap
+ * @property {'line-chart'} LINE_CHART
+ * @property {'line-chart-smooth'} LINE_CHART_SMOOTH
+ * @property {'line-chart-forecast'} LINE_CHART_FORECAST
+ * @property {'column-chart'} COLUMN_CHART
+ * @property {'column-chart-stacked'} COLUMN_CHART_STACKED
+ * @property {'column-chart-stacked-percent'} COLUMN_CHART_STACKED_PERCENT
+ * @property {'combo-chart'} COMBO_CHART
+ * @property {'combo-column-chart'} COMBO_COLUMN_CHART
+ * @property {'combo-stacked-chart'} COMBO_STACKED_CHART
+ * @property {'bar-chart'} BAR_CHART
+ * @property {'bar-chart-stacked'} BAR_CHART_STACKED
+ * @property {'bar-chart-stacked-percent'} BAR_CHART_STACKED_PERCENT
+ * @property {'scatter-chart'} SCATTER_CHART
+ * @property {'area-chart'} AREA_CHART
+ * @property {'area-chart-smooth'} AREA_CHART_SMOOTH
+ * @property {'table_only'} TABLE_ONLY
+ * @property {'polygon-chart'} POLYGON_CHART
+ * @property {'pie-chart'} PIE_CHART
+ * @property {'pie-chart-drilldown'} PIE_CHART_DRILLDOWN
+ * @property {'gauge-solid-chart'} GAUGE_SOLID_CHART
+ * @property {'gauge-chart'} GAUGE_CHART
+ * @property {'gauge-chart-enhanced'} GAUGE_CHART_ENHANCED
+ * @property {'gauge-chart-dynamic-goal'} GAUGE_CHART_DYNAMIC_GOAL
+ * @property {'gauge-chart-categories-summary'} GAUGE_CHART_CATEGORIES_SUMMARY
+ * @property {'kpi-widget'} KPI_WIDGET
+ * @property {'smart-kpi'} SMART_KPI
+ * @property {'text-widget'} TEXT_WIDGET
+ * @property {'waterfall-chart-breakdown'} WATERFALL_BREAKDOWN
+ * @property {'waterfall-chart-walkthrough'} WATERFALL_WALKTHROUGH
+ * @property {'published_item'} PUBLISHED_ITEM
+ * @property {'rich_text'} RICH_TEXT
+ * @property {'excel_viewer'} EXCEL_VIEWER
+ * @property {'donut-chart'} DONUT_CHART
+ */
+
+/**
+ * Chart type identifiers.
+ * @type {ChartTypesMap}
+ */
+const CHART_TYPES = /** @type {const} */ ({
+    LINE_CHART: 'line-chart',
+    LINE_CHART_SMOOTH: 'line-chart-smooth',
+    LINE_CHART_FORECAST: 'line-chart-forecast',
+    COLUMN_CHART: 'column-chart',
+    COLUMN_CHART_STACKED: 'column-chart-stacked',
+    COLUMN_CHART_STACKED_PERCENT: 'column-chart-stacked-percent',
+    COMBO_CHART: 'combo-chart',
+    COMBO_COLUMN_CHART: 'combo-column-chart',
+    COMBO_STACKED_CHART: 'combo-stacked-chart',
+    BAR_CHART: 'bar-chart',
+    BAR_CHART_STACKED: 'bar-chart-stacked',
+    BAR_CHART_STACKED_PERCENT: 'bar-chart-stacked-percent',
+    SCATTER_CHART: 'scatter-chart',
+    AREA_CHART: 'area-chart',
+    AREA_CHART_SMOOTH: 'area-chart-smooth',
+    TABLE_ONLY: 'table_only',
+    POLYGON_CHART: 'polygon-chart',
+    PIE_CHART: 'pie-chart',
+    PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
+    GAUGE_SOLID_CHART: 'gauge-solid-chart',
+    GAUGE_CHART: 'gauge-chart',
+    GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
+    GAUGE_CHART_DYNAMIC_GOAL: 'gauge-chart-dynamic-goal',
+    GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
+    KPI_WIDGET: 'kpi-widget',
+    SMART_KPI: 'smart-kpi',
+    TEXT_WIDGET: 'text-widget',
+    WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
+    WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
+    PUBLISHED_ITEM: 'published_item',
+    RICH_TEXT: 'rich_text',
+    EXCEL_VIEWER: 'excel_viewer',
+    DONUT_CHART: 'donut-chart',
+});
+
+module.exports = {
+    CHART_COLORS,
+    CHART_TYPES,
+    SUBOPTIONS_FONTS,
+    HIGHCHARTS_FONT_FAMILY,
+    HIGHCHARTS_FONT_FAMILY_CSS,
+    TOOLTIP_DEFAULT_SETTINGS,
+    TOOLTIP_DEFAULT_OPTIONS,
+    LABEL_DEFAULT_SETTINGS,
+    LABEL_DEFAULT_OPTIONS,
+    CHART_AXIS_DEFAULT_LABEL,
+    CHART_LEGEND_DEFAULT_LABEL,
+    SUBOPTIONS_FONT_SIZE_VALUES,
+    DEFAULT_CATEGORY_CLASS,
+    generateFontSizeOptions,
+};

package/src/options/elements.js

@@ -0,0 +1,377 @@
+/**
+ * @fileoverview UI element factory functions for chart suboptions.
+ * Provides reusable factories to create consistent element definitions
+ * for the chart options editor UI.
+ * @module @datarailsshared/dr_renderer/options/elements
+ */
+
+/**
+ * Element type literals for suboption elements.
+ * @typedef {'toggle'|'checkbox'|'input'|'select'|'radio'|'color_picker'|'devider'|'textarea'|'tag'|'text'} ElementType
+ */
+
+/**
+ * Option item for select/radio elements.
+ * @typedef {Object} ElementOption
+ * @property {string|number} label - Display label
+ * @property {string|number} value - Option value
+ */
+
+/**
+ * Tag element options configuration.
+ * @typedef {Object} TagElementOptions
+ * @property {boolean} [add_new_tag] - Whether new tags can be added
+ * @property {boolean} [searchable] - Whether tags are searchable
+ * @property {boolean} [multiple] - Whether multiple tags can be selected
+ */
+
+/**
+ * Callback function that receives chart type and returns boolean.
+ * @callback ShowConditionCallback
+ * @param {string} chartType - The chart type identifier
+ * @returns {boolean} Whether to show the element
+ */
+
+/**
+ * Callback function for handling value changes.
+ * @callback ValueChangeCallback
+ * @param {Record<string, unknown>} value - The current options value object
+ * @returns {void}
+ */
+
+/**
+ * Callback function for disabled state.
+ * @callback DisabledConditionCallback
+ * @param {Record<string, unknown>} value - The current options value object
+ * @returns {boolean} Whether the element should be disabled
+ */
+
+/**
+ * Suboption element definition.
+ * @typedef {Object} SuboptionElement
+ * @property {ElementType} element_type - Type of the UI element
+ * @property {string} [element_label] - Display label for the element
+ * @property {string} [value_name] - Property name in the options object
+ * @property {string|number|boolean|null|Array<unknown>} [default_value] - Default value for the element
+ * @property {Array<ElementOption>|TagElementOptions|string[]} [element_options] - Options for select/radio/tag elements
+ * @property {ShowConditionCallback} [showFn] - Function to determine if element should be shown
+ * @property {ValueChangeCallback} [clickFn] - Click handler function
+ * @property {ValueChangeCallback} [onChange] - Change handler function
+ * @property {string} [disabled_str] - String expression for disabled state
+ * @property {DisabledConditionCallback} [disabled_fn] - Function to determine disabled state
+ * @property {boolean} [hidden] - Whether element is hidden
+ * @property {boolean} [show_in_one_row] - Whether to show element in one row
+ * @property {string} [label_tooltip] - Tooltip text for the label
+ * @property {string} [element_sub_title] - Subtitle for the element
+ * @property {'number'|'string'} [value_type] - Value type for input elements
+ */
+
+/**
+ * Toggle element options.
+ * @typedef {Object} ToggleElementOptions
+ * @property {string} [disabled_str] - Disabled state expression
+ * @property {DisabledConditionCallback} [disabled_fn] - Disabled state function
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates a toggle element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {boolean} [defaultValue=false] - Default value
+ * @param {ToggleElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createToggle = (valueName, label, defaultValue = false, options = {}) => ({
+    element_type: 'toggle',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Checkbox element options.
+ * @typedef {Object} CheckboxElementOptions
+ * @property {ValueChangeCallback} [clickFn] - Click handler
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ * @property {DisabledConditionCallback} [disabled_fn] - Disabled state function
+ * @property {boolean} [hidden] - Whether element is hidden
+ */
+
+/**
+ * Creates a checkbox element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {boolean} [defaultValue=false] - Default value
+ * @param {CheckboxElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createCheckbox = (valueName, label, defaultValue = false, options = {}) => ({
+    element_type: 'checkbox',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Input element options.
+ * @typedef {Object} InputElementOptions
+ * @property {ValueChangeCallback} [onChange] - Change handler
+ * @property {string} [label_tooltip] - Tooltip text
+ * @property {boolean} [show_in_one_row] - Show in one row
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates an input element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {string|number|null} [defaultValue=''] - Default value
+ * @param {InputElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createInput = (valueName, label, defaultValue = '', options = {}) => ({
+    element_type: 'input',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Select element additional options.
+ * @typedef {Object} SelectElementOptions
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ * @property {DisabledConditionCallback} [disabled_fn] - Disabled state function
+ */
+
+/**
+ * Creates a select element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {Array<ElementOption>|string[]} elementOptions - Options for the select
+ * @param {string|number} [defaultValue] - Default value
+ * @param {SelectElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createSelect = (valueName, label, elementOptions, defaultValue, options = {}) => ({
+    element_type: 'select',
+    element_label: label,
+    value_name: valueName,
+    element_options: elementOptions,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Radio element additional options.
+ * @typedef {Object} RadioElementOptions
+ * @property {string} [element_sub_title] - Subtitle for the element
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates a radio element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {Array<ElementOption>} elementOptions - Options for the radio group
+ * @param {string} [defaultValue=''] - Default value
+ * @param {RadioElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createRadio = (valueName, label, elementOptions, defaultValue = '', options = {}) => ({
+    element_type: 'radio',
+    element_label: label,
+    value_name: valueName,
+    element_options: elementOptions,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Color picker element additional options.
+ * @typedef {Object} ColorPickerElementOptions
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates a color picker element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {string} [defaultValue=''] - Default color value
+ * @param {ColorPickerElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createColorPicker = (valueName, label, defaultValue = '', options = {}) => ({
+    element_type: 'color_picker',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Creates a divider element.
+ * @param {string} [label] - Optional section label
+ * @returns {SuboptionElement}
+ */
+const createDivider = (label) => {
+    /** @type {SuboptionElement} */
+    const element = { element_type: 'devider' };
+    if (label) {
+        element.element_label = label;
+    }
+    return element;
+};
+
+/**
+ * Textarea element additional options.
+ * @typedef {Object} TextareaElementOptions
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates a textarea element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {string} [defaultValue=''] - Default value
+ * @param {TextareaElementOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createTextarea = (valueName, label, defaultValue = '', options = {}) => ({
+    element_type: 'textarea',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    ...options,
+});
+
+/**
+ * Tag element additional options.
+ * @typedef {Object} TagAdditionalOptions
+ * @property {ShowConditionCallback} [showFn] - Show condition function
+ */
+
+/**
+ * Creates a tag element.
+ * @param {string} valueName - Property name in options
+ * @param {string} label - Display label
+ * @param {Array<string|number>} [defaultValue=[]] - Default value
+ * @param {TagElementOptions} [tagOptions={}] - Tag-specific options
+ * @param {TagAdditionalOptions} [options={}] - Additional options
+ * @returns {SuboptionElement}
+ */
+const createTag = (valueName, label, defaultValue = [], tagOptions = {}, options = {}) => ({
+    element_type: 'tag',
+    element_label: label,
+    value_name: valueName,
+    default_value: defaultValue,
+    element_options: {
+        add_new_tag: tagOptions.add_new_tag ?? true,
+        searchable: tagOptions.searchable ?? true,
+        multiple: tagOptions.multiple ?? true,
+    },
+    ...options,
+});
+
+// ============================================================================
+// Composite Element Groups (commonly used together)
+// ============================================================================
+
+const {
+    SUBOPTIONS_FONTS,
+    LABEL_DEFAULT_SETTINGS,
+    TOOLTIP_DEFAULT_SETTINGS,
+    SUBOPTIONS_FONT_SIZE_VALUES,
+} = require('./constants');
+
+/**
+ * Font styling default values.
+ * @typedef {Object} FontStylingDefaults
+ * @property {string} [fontStyle] - Default font style
+ * @property {string|number} [fontSize] - Default font size
+ * @property {string} [fontColor] - Default font color
+ */
+
+/**
+ * Creates a standard font styling group (font style, size, color).
+ * @param {FontStylingDefaults} [defaults={}] - Default values
+ * @returns {SuboptionElement[]}
+ */
+const createFontStylingGroup = (defaults = {}) => [
+    createSelect(
+        'font_style',
+        'Font style',
+        SUBOPTIONS_FONTS,
+        defaults.fontStyle ?? LABEL_DEFAULT_SETTINGS.FONT_FAMILY
+    ),
+    createSelect(
+        'font_size',
+        'Font size',
+        SUBOPTIONS_FONT_SIZE_VALUES,
+        defaults.fontSize ?? LABEL_DEFAULT_SETTINGS.FONT_SIZE
+    ),
+    createColorPicker(
+        'font_color',
+        'Font Color',
+        defaults.fontColor ?? LABEL_DEFAULT_SETTINGS.FONT_COLOR
+    ),
+];
+
+/**
+ * Creates a label font styling group with divider.
+ * @param {FontStylingDefaults} [defaults={}] - Default values
+ * @returns {SuboptionElement[]}
+ */
+const createLabelStyleGroup = (defaults = {}) => [
+    createDivider(),
+    createDivider('Label Style'),
+    ...createFontStylingGroup(defaults),
+];
+
+/**
+ * Creates a tooltip font styling group with divider.
+ * @param {FontStylingDefaults} [defaults={}] - Default values
+ * @returns {SuboptionElement[]}
+ */
+const createTooltipStyleGroup = (defaults = {}) => [
+    createDivider(),
+    createDivider('Tooltip Style'),
+    createSelect(
+        'font_style',
+        'Font style',
+        SUBOPTIONS_FONTS,
+        defaults.fontStyle ?? TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY
+    ),
+    createSelect(
+        'font_size',
+        'Font size',
+        SUBOPTIONS_FONT_SIZE_VALUES,
+        defaults.fontSize ?? TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE
+    ),
+    createColorPicker(
+        'font_color',
+        'Font Color',
+        defaults.fontColor ?? TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR
+    ),
+];
+
+module.exports = {
+    // Basic element factories
+    createToggle,
+    createCheckbox,
+    createInput,
+    createSelect,
+    createRadio,
+    createColorPicker,
+    createDivider,
+    createTextarea,
+    createTag,
+    
+    // Composite groups
+    createFontStylingGroup,
+    createLabelStyleGroup,
+    createTooltipStyleGroup,
+};

package/src/options/helpers.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Helper functions for chart options.
+ * Contains utility functions used by option builders.
+ * @module @datarailsshared/dr_renderer/options/helpers
+ */
+
+const { CHART_TYPES } = require('./constants');
+
+// ============================================================================
+// Chart Type Helpers
+// ============================================================================
+
+/**
+ * Checks if a chart type supports vertical data labels option.
+ * Returns false for chart types that don't support vertical labels.
+ * @param {string} type - The chart type identifier
+ * @returns {boolean} True if the chart supports vertical data labels
+ */
+const chartHasVerticalDataLabelsOption = (type) => {
+    /** @type {string[]} */
+    const noVerticalLabelsCharts = [
+        CHART_TYPES.LINE_CHART,
+        CHART_TYPES.LINE_CHART_SMOOTH,
+        CHART_TYPES.AREA_CHART,
+        CHART_TYPES.AREA_CHART_SMOOTH,
+        CHART_TYPES.BAR_CHART,
+        CHART_TYPES.BAR_CHART_STACKED,
+    ];
+    return !noVerticalLabelsCharts.includes(type);
+};
+
+module.exports = {
+    chartHasVerticalDataLabelsOption,
+};