using System;
using System.Web.Mvc;
using ChartDirector;

namespace NetMvcCharts.Controllers
{
    public class ViewportcontroldemoController : Controller
    {
        //
        // Initialize the WebChartViewer when the page is first loaded
        //
        // We use a data buffer to emulate the last 240 samples.
        const int sampleSize = 3600;
        double[] dataSeriesA = new double[sampleSize];
        double[] dataSeriesB = new double[sampleSize];
        double[] dataSeriesC = new double[sampleSize];
        DateTime[] timeStamps = new DateTime[sampleSize];

        //
        // Create a random table for demo purpose.
        //
        private void loadRandomData()
        {
            // Our pseudo random number generator
            DateTime firstDate = DateTime.Now.AddSeconds(-timeStamps.Length);
            for (int i = 0; i < timeStamps.Length; ++i)
            {
                timeStamps[i] = firstDate.AddSeconds(i);
                double p = timeStamps[i].Ticks / 10000000;
                dataSeriesA[i] = Math.Cos(p * 2.1) * 10 + 1 / (Math.Cos(p) * Math.Cos(p) + 0.01) + 20;
                dataSeriesB[i] = 100 * Math.Sin(p / 27.7) * Math.Sin(p / 10.1) + 150;
                dataSeriesC[i] = 100 * Math.Cos(p / 6.7) * Math.Cos(p / 11.9) + 150;
            }
        }

        private void initViewer(RazorChartViewer viewer)
        {
            // Initialize the view port to show 180 seconds
            viewer.ViewPortWidth = 180.0 / 3600;
            viewer.ViewPortLeft = 1 - viewer.ViewPortWidth;

            // Set the maximum zoom to 10 seconds
            viewer.ZoomInWidthLimit = 10.0 / 3600;
        }

        //
        // Draw the chart
        //
        private void drawChart(RazorChartViewer viewer)
        {
            //================================================================================
            // Configure overall chart appearance.
            //================================================================================

            // Create an XYChart object of size 640 x 400 pixels
            XYChart c = new XYChart(640, 400);

            // Set the plotarea at (55, 55) with width 80 pixels less than chart width, and height 90
            // pixels less than chart height. Use a vertical gradient from light blue (f0f6ff) to sky
            // blue (a0c0ff) as background. Set border to transparent and grid lines to white (ffffff).
            c.setPlotArea(55, 55, c.getWidth() - 80, c.getHeight() - 90, c.linearGradientColor(0, 55, 0,
                c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);

            // As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
            c.setClipping();

            // Add a title box using dark grey (0x333333) 18pt Arial Bold font
            c.addTitle("   Zooming and Scrolling with Viewport Control", "Arial Bold", 15, 0x333333);

            if (viewer.IsAttachmentRequest()) {
                LegendBox b = c.addLegend(55, 28, false, "Arial Bold", 10);
                b.setBackground(Chart.Transparent, Chart.Transparent);
                b.setLineStyleKey();
            }

            // Set the x and y axis stems to transparent and the label font to 10pt Arial
            c.xAxis().setColors(Chart.Transparent);
            c.yAxis().setColors(Chart.Transparent);
            c.xAxis().setLabelStyle("Arial", 10);
            c.yAxis().setLabelStyle("Arial", 10);

            // Add axis title using 10pt Arial Bold font
            c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold", 10);

            //================================================================================
            // Add data to chart
            //================================================================================

            //
            // In this example, we represent the data by lines. You may modify the code below to use
            // other layer types (areas, scatter plot, etc).
            //

            // Add a line layer for the lines, using a line width of 2 pixels
            LineLayer layer = c.addLineLayer2();
            layer.setLineWidth(2);

            // In this demo, we do not have too many data points. In real code, the chart may contain a
            // lot of data points when fully zoomed out - much more than the number of horizontal pixels
            // in this plot area. So it is a good idea to use fast line mode.
            layer.setFastLineMode();

            // Now we add the 3 data series to a line layer, using the color red (0xff3333), green
            // (0x008800) and blue (0x3333cc)
            layer.setXData(timeStamps);
            layer.addDataSet(dataSeriesA, 0xff3333, "Alpha");
            layer.addDataSet(dataSeriesB, 0x008800, "Beta");
            layer.addDataSet(dataSeriesC, 0x3333cc, "Gamma");

            //================================================================================
            // Configure axis scale and labelling
            //================================================================================

            // Set the x-axis as a date/time axis with the scale according to the view port x range.
            viewer.setFullRange("x", timeStamps[0], timeStamps[timeStamps.Length - 1]);
            viewer.syncDateAxisWithViewPort("x", c.xAxis());

            // For the automatic y-axis labels, set the minimum spacing to 30 pixels.
            c.yAxis().setTickDensity(30);

            // x-axis label format
            c.xAxis().setLabelFormat("{value|hh:nn:ss}");
            c.xAxis().setTickDensity(75);

            //================================================================================
            // Step 5 - Output the chart
            //================================================================================

            if (viewer.IsAttachmentRequest()) {
                // Output as PDF attachment
                viewer.Image = c.makeWebImage(Chart.PDF);
            } else {
                // Output the chart
                viewer.Image = c.makeWebImage(Chart.PNG);

                // Output Javascript chart model to the browser to suppport tracking cursor
                viewer.ChartModel = c.getJsChartModel();
            }
        }

        private void drawFullChart(RazorViewPortControl vp)
        {
            // Create an XYChart object of size 640 x 60 pixels
            XYChart c = new XYChart(640, 60);

            // Set the plotarea with the same horizontal position as that in the main chart for
            // alignment. The vertical position is set to equal to the chart height.
            c.setPlotArea(55, 0, c.getWidth() - 80, c.getHeight() - 1, 0xc0d8ff, -1, 0x888888,
                Chart.Transparent, 0xffffff);

            // Set the x axis stem to transparent and the label font to 10pt Arial
            c.xAxis().setColors(Chart.Transparent);
            c.xAxis().setLabelStyle("Arial", 10);

            // Put the x-axis labels inside the plot area by setting a negative label gap. Use
            // setLabelAlignment to put the label at the right side of the tick.
            c.xAxis().setLabelGap(-1);
            c.xAxis().setLabelAlignment(1);

            // Set the y axis stem and labels to transparent (that is, hide the labels)
            c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

            // Add a line layer for the lines with fast line mode enabled
            LineLayer layer = c.addLineLayer2();
            layer.setFastLineMode();

            // Now we add the 3 data series to a line layer, using the color red (0xff3333), green
            // (0x008800) and blue (0x3333cc)
            layer.setXData(timeStamps);
            layer.addDataSet(dataSeriesA, 0xff3333);
            layer.addDataSet(dataSeriesB, 0x008800);
            layer.addDataSet(dataSeriesC, 0x3333cc);

            // The x axis scales should reflect the full range of the view port
            c.xAxis().setDateScale(timeStamps[0], timeStamps[timeStamps.Length - 1]);

            // For the automatic x-axis labels, set the minimum spacing to 75 pixels.
            c.xAxis().setTickDensity(75);
            c.xAxis().setLabelFormat("{value|hh:nn:ss}");
            
            // For the auto-scaled y-axis, as we hide the labels, we can disable axis rounding. This can
            // make the axis scale fit the data tighter.
            c.yAxis().setRounding(false, false);

            // Output the chart
            vp.Image = c.makeWebImage(Chart.PNG);
        }

        public ActionResult Index()
        {
            loadRandomData();

            RazorChartViewer viewer = ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1");
            RazorViewPortControl viewPortCtrl = ViewBag.ViewPortControl = new RazorViewPortControl(HttpContext, "chart2");

            //
            // This script handles both the full page request, as well as the subsequent partial updates
            // (AJAX chart updates). We need to determine the type of request first before we processing
            // it.
            //
            if (RazorChartViewer.IsPartialUpdateRequest(Request))
            {
                if (RazorChartViewer.GetSenderClientId(Request) == viewer.ID)
                {
                    // Is a partial update request.
                    drawChart(viewer);

                    if (viewer.IsAttachmentRequest())
                        return File(viewer.StreamChart(), Response.ContentType, "demochart.pdf");
                    else
                        return Content(viewer.PartialUpdateChart());
                }
                else
                {
                    drawFullChart(viewPortCtrl);
                    return Content(viewPortCtrl.PartialUpdateChart());
                }
            }
        
            //
            // If the code reaches here, it is a full page request.
            //

            // Initialize the WebChartViewer and draw the chart.
            initViewer(viewer);
            drawChart(viewer);

            // Draw a thumbnail chart representing the full range in the WebViewPortControl
            drawFullChart(viewPortCtrl);
            return View();
        }
    }
}