@page
@model FlexChartModel
@{
    ViewData["DemoSettings"] = true;
    ClientSettingsModel demoSettingModel = (ClientSettingsModel)ViewData["DemoSettingsModel"];
}

<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name">
    <c1-items-source source-collection="@Model.FruitsSales"></c1-items-source>
    <c1-flex-chart-series binding="MarPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="AprPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="MayPrice">
    </c1-flex-chart-series>
</c1-flex-chart>

@section Scripts{
    <script type="text/javascript">
    convertStacking = function (value) {
        return value === "Stacked 100%" ? "Stacked100pc" : value;
    };
    convertPalette = function (value) {
        return wijmo.chart.Palettes[value];
    };
    updateGroupWidth = function (control, value) {
        control.options = { groupWidth: value === "50 pixels" ? 50 : value };

    };
    </script>
}

@section Summary{
    This view shows the basic features of FlexChartges.
}

@section Description{
    <p>
        Steps for getting started with the FlexChart control in Razor Pages:
    </p>
    <ol>
        <li>Add a public property <b>FruitsSales</b> for items source binding.</li>
        <li>Initialize the FlexChart control in Razor page view using <b>&lt;c1-flex-chart&gt;&lt;/c1-flex-chart&gt;</b> tag.</li>
        <li>Set the value of items sources as <b>@@Model.FruitsSales</b>.</li>
    </ol>
}

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesExplorer.Models;

namespace RazorPagesExplorer.Pages
{
    public class FlexChartModel : PageModel
    {
        public readonly IEnumerable<Fruit> FruitsSales = Fruit.GetFruitsSales();
        public void OnGet()
        {
            ViewData["DemoSettingsModel"] = new ClientSettingsModel
            {
                Settings = CreateIndexSettings(),
                DefaultValues = GetIndexDefaultValues()
            };
        }

        private static IDictionary<string, object[]> CreateIndexSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false, true}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}
            };

            return settings;
        }

        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"GroupWidth", "70%"}
            };

            return defaultValues;
        }
    }
}