Chart

/***
    USAGE:
    
    Chart(type, data, height, width, xaxis, yaxis, title, min, max, interval, id)

    PARAMETERS:
    
    type : str (one of 'circulargauge', 'column', 'multiseriescolumn', 'lineargauge', 'line', 'bar', 'multiseriesbar', 'pie', 'pyramid', or 'funnel')
    
    data : list
    
    (optional) height : num (default: 450)
        Height of chart in pixel or percent.
        If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage.
    
    (optional) width : num (default: 450)
        Width of chart in pixel or percent.
        If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage.
    
    (optional) xaxis : str (default: 'Y-Axis')
        Label for X-Axis.
    
    (optional) yaxis : str (default: 'X-Axis')
        Label for Y-Axis.
    
    (optional) title : str (default: 'Title')
        Label for chart.
    
    (optional) min : num (default: 0)
        Lower bound for Linear Gauge chart type.
    
    (optional) max : num (default: 100)
        Upper bound for Linear Gauge chart type.
    
    (optional) interval : num (default: 10)
        Major interval for axis markers.
    
    (optional) id : str (default: nil)
        ID for chart component.  Used for listening for events and interacting with chart through JavaScript.

    VERSIONS:
    
    1.0     2-Feb-10    robertm     initial version
    1.1     4-Mar-10    steveb      code clean-up
    1.2     29-Mar-10   steveb      better handling of error conditions; new default look for progress gauge
    1.3     16-Jul-10   steveb      fixed inproper data handling for 'pie' type. support for min,max

***/

// GET VARIABLES FROM TEMPLATE CALL
var type = string.tolower($type ?? $0 ?? 'circulargauge');
var data = $data ?? $1 ?? 67;
var height = $height ?? $2 ?? 450;
var width = $width ?? $3 ?? 450;
var xaxis = $xaxis ?? $4;
var yaxis = $yaxis ?? $5;
var title = $title ?? $6;
var min = $min ?? $7;
var max = $max ?? $8;
var interval = $interval ?? $9 ?? 10;
var id = $id ?? $10;
var error;

// TODO (steveb): validate the 'data' field
// TODO (steveb): enable/disable animation

// format settings
let settings_xml = <settings>
        <animation enabled="True"/>
    </settings>;

// format axis
var axes_xml = <axes>
    <x_axis>
        <title enabled=(xaxis is not nil)>
            <text> xaxis </text>
        </title>
        <labels>
            <format> "{%Value}{numDecimals:0}" </format>
        </labels>
    </x_axis>
    <y_axis position=((type == 'bar' || type == 'multiseriesbar') ? "opposite" : nil)>
        <title enabled=(yaxis is not nil)>
            <text> yaxis </text>
        </title>
        <labels>
            <format> "{%Value}{numDecimals:0}" </format>
        </labels>
        <scale major_interval=(interval) minor_interval=(interval / 4) minimum=(min) maximum=(max) />
    </y_axis>
</axes>;

// set defaults for min-max
let min = min ?? 0;
let max = max ?? 100;

// format data
var data_xml;
if((type != 'pie') && data is map) {
    let data_xml = <data>
        foreach (var series:points in data) {
            <series name=(series)>
                foreach (var p in points) {
                    foreach(var label:value in p) {
                        <point y=(value) name=(label)>
                            <tooltip enabled="true">
                                <format> "{%SeriesName} ({%Name}) - {%Value}" </format>
                            </tooltip>
                        </point>
                    }
                }
            </series>
        }
    </data>;
} else if(data is list) {
    let data_xml = <data>
        <series name="Series 1">
            foreach(var d in data) {
                foreach(var label:value in d) {
                    <point y=(value) name=(label) />
                }
            }
        </series>
    </data>;
}


// CHART BUILDS
var chart;
switch (type) {

// SINGLE-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS [{label1:value1}, {label2:value2}, {label3:value3}]
// MULTI-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}], series2:[{label1:value1}, {label2:value2}, {label3:value3}], series3:[{label1:value1}, {label2:value2}, {label3:value3}]}
case 'column':
case 'multiseriescolumn':
case 'bar':
case 'multiseriesbar':

    // determine layout value
    var layout;
    switch(type) {
    case 'column':
    case 'multiseriescolumn':
        let layout = "CategorizedVertical";
    case 'bar':
    case 'multiseriesbar':
        let layout = "CategorizedHorizontal";
    }

    // generate chart xml
    let chart = <anychart>
        settings_xml;
        <charts>
            <chart plot_type=(layout)>
                <data_plot_settings default_series_type="Bar" enable_3d_mode="true" z_aspect="0.25">
                    <bar_series group_padding="0.2" >
                        <tooltip_settings enabled="true"/>
                    </bar_series>
                </data_plot_settings>
                <chart_settings>
                    <title enabled=(title is not nil)>
                        <text> title </text>
                    </title>
                    
                    // check if we plotting a series of data points
                    if(data is map) {
                        <legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15">
                            <format> "{%Icon} {%Name}" </format>
                            <title enabled="false"/>
                            <columns_separator enabled="true"/>
                            <background>
                                <inside_margin left="10" right="10"/>
                            </background>
                            <items>
                                <item source="Series"/>
                            </items>
                        </legend>
                    }
                    axes_xml;
                </chart_settings>
                data_xml;
            </chart>
        </charts>
    </anychart>;

// MULTI-SERIES LINE CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series2:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series3:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}]}
case "line":
    let chart = <anychart>
        settings_xml;
        <charts>
            <chart plot_type="CategorizedVertical">
                <chart_settings>
                    <title enabled=(title is not nil)>
                        <text> title </text>
                    </title>
                    <legend enabled="true">
                        <title enabled="false"/>
                    </legend>
                    axes_xml;
                </chart_settings>
                <data_plot_settings default_series_type="Spline">
                    <line_series>
                        <marker_settings>
                            <marker size="8"/>
                            <states>
                                <hover>
                                    <marker size="12"/>
                                </hover>
                            </states>
                        </marker_settings>
                        <tooltip_settings enabled="True"/>
                    </line_series>
                </data_plot_settings>
                data_xml;
            </chart>
        </charts>
    </anychart>;
    
//3D PIE CHART, DATA VARIABLE MUST BE FORMATTED AS {name1:value1, name2:value2, name3:value3}
case 'pie':
    let chart = '<anychart>
        settings_xml;
        <charts>
            <chart plot_type="Pie">
                <data_plot_settings enable_3d_mode="true">
                    <pie_series>
                        <tooltip_settings enabled="true">
                            <format>
                                {%Name} : {%Value}{numDecimals:0} ({%YPercentOfSeries}{numDecimals: 0}%)
                            </format>
                        </tooltip_settings>
                        <label_settings enabled="true">
                            <background enabled="false"/>
                            <position anchor="Center" valign="Center" halign="Center" padding="20"/>
                            <font color="White">
                                <effects>
                                    <drop_shadow enabled="true" distance="2" opacity="0.5" blur_x="2" blur_y="2"/>
                                </effects>
                            </font>
                            <format>{%YPercentOfSeries}{numDecimals:0}%</format>
                        </label_settings>
                    </pie_series>
                </data_plot_settings>
                <data>
                    <series name="Series 1" type="Pie">'
                    .. (
                        foreach (var name:y in data) {
                            '<point name="' .. name .. '" y="' .. y .. '"/>'
                        }
                    ) ..
                    '</series>
                </data>
                <chart_settings>
                    <title enabled="true" padding="15">
                        <text>' .. title .. '</text>
                    </title>
                    <legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15">
                        <format>{%Icon} {%Name} - {%YValue}{numDecimals:0}</format>
                        <title enabled="false"/>
                        <columns_separator enabled="false"/>
                        <background>
                            <inside_margin left="10" right="10"/>
                        </background>
                        <items>
                            <item source="Points"/>
                        </items>
                    </legend>
                </chart_settings>
            </chart>
        </charts>
    </anychart>';

// PYRAMID/FUNNEL CHART, DATA VARIABLE MUST BE FORMATTED AS {label1:value1, label2:value2, label3:value3}
case 'pyramid':
case 'funnel':
    var ispyramid = (type == 'pyramid');
    let chart = <anychart>
        settings_xml;
        <charts>
            <chart plot_type="Funnel">
                <chart_settings>
                    <title enabled=(title is not nil)>
                        <text> title </text>
                    </title>
                    <data_plot_background enabled="false" />
                    <legend enabled="false" />
                </chart_settings>
                <data_plot_settings enable_3d_mode="true">
                    <funnel_series inverted=(ispyramid) neck_height=(ispyramid ? 0 : nil) fit_aspect="1" min_width=(ispyramid ? 0 : nil) padding=(ispyramid ? 0 : nil) mode="Square">
                        <animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/>
                        <connector enabled="true" color="Black" opacity="0.4"/>
                        <tooltip_settings enabled="true">
                            if(ispyramid) {
                                <position anchor="CenterRight" padding="10" valign="Center" halign="right"/>
                            }
                            <format> "{%Name} - {%YValue}{numDecimals:0}" </format>
                        </tooltip_settings>
                        <label_settings enabled="true">
                            <animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/>
                            if(ispyramid) {
                                <position anchor="Center" valign="Center" halign="Center" padding="10"/>
                            } else {
                                <position anchor="center" padding="50"/>
                            }
                            <format> "{%Name} - {%YValue}{numDecimals:0}" </format>
                            <background enabled="true">
                                <corners type="Rounded" all="3"/>
                            </background>
                            <states>
                                <hover>
                                    <background>
                                        <border type="Solid" color="DarkColor(%Color)" thickness="2"/>
                                    </background>
                                </hover>
                                <pushed>
                                    <background>
                                        <border type="Solid" color="#494949" thickness="2" opacity="0.7"/>
                                    </background>
                                </pushed>
                                <selected_hover>
                                    <background>
                                        <border type="Solid" color="DarkColor(%Color)" thickness="2" opacity="0.7"/>
                                    </background>
                                </selected_hover>
                                <selected_normal>
                                    <background>
                                        <border type="Solid" color="DarkColor(%Color)" thickness="2"/>
                                    </background>
                                </selected_normal>
                            </states>
                        </label_settings>
                        <funnel_style>
                            <border color="Black" opacity="0.05"/>
                            <states>
                                <hover>
                                    <fill color="%Color"/>
                                    <hatch_fill enabled="true" type="Percent50" color="White" opacity="0.3"/>
                                </hover>
                                <selected_hover>
                                    <fill color="%Color"/>
                                    <hatch_fill type="Checkerboard" color="#404040" opacity="0.1"/>
                                </selected_hover>
                                <selected_normal>
                                    <fill color="%Color"/>
                                    <hatch_fill type="Checkerboard" color="Black" opacity="0.1"/>
                                </selected_normal>
                            </states>
                        </funnel_style>
                        <marker_settings enabled="true">
                            <marker type="None" anchor="Center" v_align="Center" h_align="Center" size="12"/>
                            <fill color="Yellow"/>
                            <border color="DarkColor(Yellow)"/>
                            <states>
                                <hover>
                                    <marker type="Star5"/>
                                </hover>
                                <pushed>
                                    <marker type="Star5" size="8"/>
                                </pushed>
                                <selected_hover>
                                    <marker type="Star5" size="14"/>
                                </selected_hover>
                                <selected_normal>
                                    <marker type="Star5"/>
                                </selected_normal>
                            </states>
                        </marker_settings>
                    </funnel_series>
                </data_plot_settings>
                data_xml;
            </chart>
        </charts>
    </anychart>;
    
// CIRCULAR GAUGE CHART, DATA VARIABLE MUST BE A NUMBER
case 'circulargauge':
    let chart = <anychart>
        settings_xml;
        <margin all="0"/>
        <gauges>
            <gauge>
                <chart_settings>
                    <title enabled=(title is not nil)>
                        <text> title </text>
                    </title>
                    <chart_background>
                        <border enabled="false"/>
                    </chart_background>
                </chart_settings>
                <circular name="data">
                    <axis radius="37" start_angle="85" sweep_angle="190" size="3">
                        <labels align="Outside" padding="6">
                            <format> "{%Value}{numDecimals:0}" </format>
                        </labels>
                        <scale_bar>
                            <fill color="#292929"/>
                        </scale_bar>
                        <major_tickmark align="Center" length="10" padding="0"/>
                        <minor_tickmark enabled="false"/>
                        <color_ranges>
                            <color_range start=(min) end=(max) align="Inside" start_size="15" end_size="15" padding="6">
                                <fill type="Gradient">
                                    <gradient>
                                        <key color="Red"/>
                                        <key color="Yellow"/>
                                        <key color="Green"/>
                                    </gradient>
                                </fill>
                                <border enabled="true" color="Black" opacity="0.4"/>
                            </color_range>
                        </color_ranges>
                    </axis>
                    <frame>
                        <inner_stroke enabled="false"/>
                        <outer_stroke enabled="false"/>
                        <background>
                            <fill type="Gradient">
                                <gradient angle="45">
                                    <key color="#FDFDFD"/>
                                    <key color="#F7F3F4"/>
                                </gradient>
                            </fill>
                            <border enabled="true" color="#A9A9A9"/>
                        </background>
                        <effects enabled="false"/>
                    </frame>
                    <pointers>
                        <pointer value=(data) name="value">
                            <label enabled="true" under_pointers="true">
                                <position placement_mode="ByPoint" x="50" y="60"/>
                                <format> "{%Value}{numDecimals:0}%" </format>
                                <background enabled="false"/>
                            </label>
                            <needle_pointer_style thickness="7" point_thickness="5" point_radius="3">
                                <fill color="Rgb(230,230,230)"/>
                                <border color="Black" opacity="0.7"/>
                                <effects enabled="true">
                                    <bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/>
                                    <drop_shadow enabled="true" distance="1" blur_x="1" blur_y="1" opacity="0.4"/>
                                </effects>
                                <cap>
                                    <background>
                                        <fill type="Gradient">
                                            <gradient type="Linear" angle="45">
                                                <key color="#D3D3D3"/>
                                                <key color="#6F6F6F"/>
                                            </gradient>
                                        </fill>
                                        <border color="Black" opacity="0.9"/>
                                    </background>
                                    <effects enabled="true">
                                        <bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/>
                                        <drop_shadow enabled="true" distance="1.5" blur_x="2" blur_y="2" opacity="0.4"/>
                                    </effects>
                                </cap>
                            </needle_pointer_style>
                            <animation enabled="true" start_time="0" duration="0.7" interpolation_type="Sine"/>
                        </pointer>
                    </pointers>
                </circular>
            </gauge>
        </gauges>
    </anychart>;

// LINEAR GAUGE, DATA VARIABLE MUST BE A NUMBER
case 'lineargauge':
    let chart = <anychart>
        settings_xml;
        <margin all="0"/>
        <gauges>
            <gauge>
                <chart_settings>
                    <title>
                        <text> title </text>
                    </title>
                    <chart_background>
                        <border enabled="false"/>
                    </chart_background>
                </chart_settings>
                <linear name="data">
                    <axis size="0" position="50">
                        <scale minimum=(min) maximum=(max) major_interval=(interval) minor_interval=(interval / 4) />
                        <scale_bar enabled="false"/>
                        <labels padding="5"/>
                        <color_ranges>
                            <color_range start=(min) end=(max) align="Outside" padding="0" start_size="8" end_size="8">
                                <fill type="Gradient">
                                    <gradient angle="90">
                                        <key color="Red"/>
                                        <key color="Yellow"/>
                                        <key color="Green"/>
                                    </gradient>
                                </fill>
                                <border enabled="true" type="Solid" color="Black" opacity="0.4"/>
                            </color_range>

                        </color_ranges>
                    </axis>
                    <pointers>
                        <pointer type="Marker" value=(data) name="value" color="#4662B0">
                            <tooltip enabled="true"/>
                            <marker_pointer_style align="Outside" padding="5" width="10" height="10"/>
                            <animation enabled="true" start_time="0" duration="1" interpolation_type="Elastic"/>
                            <label enabled="true">
                                <position placement_mode="ByAnchor" valign="Center" halign="Right" padding="45"/>
                                <format> "{%Value}{numDecimals:0}%" </format>
                                <background enabled="false"/>
                            </label>
                        </pointer>
                    </pointers>
                </linear>
            </gauge>
        </gauges>
    </anychart>;
    
default:
    if(!error) {
        let error = "Invalid chart type selected (did not recognize '" .. type .. "')";
    }
}

// check if there was an error
if(error) {
    <p style="color: red"> error </p>
} else {
    anychart(chart, width, height, id);
}