استفاده از چارت در پلیمر!

امروز مشغول یکی از چارتهای شرکت بودم که گفتم کدش رو با بقیه اشتراک بذارم.

کاری که قراره توی این صفحه انجام داده بشه اینه که میزان تولید توی شرکتی خاص رو در تاریخ های معین استخراج کنه و بصورت چارت نمایش بده.

بریم اول کدهای چارت رو ببینیم

var color = Chart.helpers.color;
                 = function () {
                };
                $.ajax({
                    url: &quot/MorrisReport&quot,
                    type: &quotPOST&quot,
                    dataType: &quotjson&quot,
                    data: Search()
                }).done(function (y) {
                    var config = {
                        type: 'line',
                        data: y
                        //{
                        //    labels: [
                        //        'فروردین',
                        //        'اردیبهشت',
                        //        'خرداد',
                        //        'تیر',
                        //        'مرداد',
                        //        'شهریور',
                        //        'مهر',
                        //        'آبان',
                        //        'آذر',
                        //        'دی',
                        //        'بهمن',
                        //        'اسفند'
                        //    ],
                        //    datasets: [
                        //        {
                        //            label: 'نامه های ارسالی',
                        //            backgroundColor: color(window.chartColors.darkred).alpha(0.5).rgbString(),
                        //            borderColor: window.chartColors.red,
                        //            fill: false,
                        //            data: y.Sender
                        //        },
                        //        {
                        //            label: 'نامه های دریافتی',
                        //            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                        //            borderColor: window.chartColors.green,
                        //            fill: false,
                        //            data: y.Reciver
                        //        }
                        //    ]
                        //}
                        ,
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'گزارش کلی'
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'روز ها'
                                    },
                                    ticks: {
                                        major: {
                                            fontStyle: 'bold',
                                            fontColor: '#FF0000'
                                        }
                                    }
                                }],
                                yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'میزان'
                                    }
                                }]
                            }
                        }
                    };
                    var ctx = document.getElementById('chartline').getContext('2d');
                    window.myLine = new Chart(ctx, config);
                });

کد HTML اون به شکل زیره :

<div class=&quotrow&quot>
    <div class=&quotcol-lg-12 col-md-12 col-sm-12 col-xs-12&quot>
        <div class=&quotrow&quot>
            <div class=&quotcol-xs-12&quot>
                <div class=&quotdashboard-box&quot>
                    <div class=&quotbox-tabbs&quot>
                        <div class=&quottabbable&quot>
                            <div class=&quottab-content tabs-flat no-padding&quot>
                                <div id=&quotrealtime&quot class=&quottab-pane active padding-5 animated fadeInUp&quot>
                                    <div class=&quotrow&quot>
                                        <div class=&quotcol-lg-12&quot>
                                            <div id=&quotmychartline&quot>
                                                <canvas id=&quotchartline&quot width=&quot1100&quot height=&quot250&quot></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src=&quot~/Scripts/Chart.bundle.js&quot>
<script src=&quot~/Scripts/utils.js&quot>

به اون دایو های زیاد توجه نکنین اونا فیکن :)

توی سی شارپش هم بصورت زیره: اول کنترلش

[HttpPost]
        public JsonResult MorrisReport(_ListNamayeshNemodarGozareshTolidVM model)
        {
            try
            {
                var result = _RyfanBLL.GetReportByCodeKala(model);
                return Json(result);
            }
            catch (Exception ex)
            {

                throw;
            }
        }

و اما کد پشت اون GetReportByCodeKala :

public ChartJsReportJSVM GetReportByCodeKala(_ListNamayeshNemodarGozareshTolidVM model)
        {
            try
            {
                using ( db = new //DBNAME())
                {
                    // var ProductNo = string.Join(&quot,&quot, model.ProductNo);
                    var ProductNo = &quot"

                    Guid IdCompanyName = Guid.Parse(model.IdCompanyToAnbarRyfan);

                    string query = $&quot//کد استوری که برای دریافت داده ها مورد استفاده شده بود'"
                    var res = db.Database.SqlQuery<string>(query).ToList();

                    List<ResultGetReportByCodeKalaWithJsonChart> result = new List<ResultGetReportByCodeKalaWithJsonChart>();
                    foreach (var item in res)
                    {
                        result.Add(new ResultGetReportByCodeKalaWithJsonChart() { Kala = JsonConvert.DeserializeObject<List<JsonChartReport>>(item) });
                    }

                    List<string> labels = new List<string>();
                    foreach (var Kalas in result)
                    {
                        foreach (var item in Kalas.Kala)
                        {
                            var ltemp = labels.Where(o => o.Contains(item.ProductionDate)).FirstOrDefault();
                            if (ltemp == null)
                            {
                                labels.Add(item.ProductionDate);
                            }
                        }
                    }
                    List<datasets> datasets = new List<datasets>();

                    int i = 0;
                    int max = 0;

                    Random rand = new Random(DateTime.Now.Ticks.GetHashCode());
                    foreach (var date in labels)
                    {
                        foreach (var Kalas in result)
                        {
                            if (i >= Kalas.Kala.Count)
                            {
                                max = Kalas.Kala.Count;
                                i = 0;
                            }
                            var KalaIsInDate = Kalas.Kala.Where(x => x.ProductionDate.Contains(date) && x.ProductName == Kalas.Kala[i]?.ProductName).FirstOrDefault();
                            if (KalaIsInDate != null)
                            {
                                var temp = datasets.Where(x => x.label.Contains(KalaIsInDate.ProductName)).FirstOrDefault();
                                if (temp != null)
                                {
                                    temp.data.Add(Convert.ToInt32(KalaIsInDate.Amount));
                                }
                                else
                                {
                                    datasets.Add(new datasets()
                                    {
                                        data = new List<int>() { Convert.ToInt32(KalaIsInDate.Amount) },
                                        label = Kalas.Kala[i].ProductName,
                                        backgroundColor = getRandomColor(rand),
                                        borderColor = getRandomColor(rand),
                                        fill = false
                                    });
                                }
                            }
                            else
                            {
                                var temp = datasets.Where(x => x.label.Contains(Kalas.Kala[i]?.ProductName)).FirstOrDefault();
                                if (temp != null)
                                {
                                    temp.data.Add(0);
                                }
                                else
                                {
                                    datasets.Add(new datasets()
                                    {
                                        data = new List<int>() { 0 },
                                        label = Kalas.Kala[i].ProductName,
                                        backgroundColor = getRandomColor(rand),
                                        borderColor = getRandomColor(rand),
                                        fill = false
                                    });
                                }
                            }
                            i++;
                        }
                    }
            
                    ChartJsReportJSVM ss = new ChartJsReportJSVM()
                    {
                        labels = labels,
                        datasets = datasets
                    };
                    return ss;
                }
            }
            catch (Exception e)
            {
                return new ChartJsReportJSVM();
            }
        }


        private string getRandomColor(Random rand)
        {
            // Random rand = new Random(DateTime.Now.Millisecond);
            // return $&quot#{rand.Next(0, 9)}{rand.Next(0, 9)}{rand.Next(0, 9)}{rand.Next(0, 9)}{rand.Next(0, 9)}{rand.Next(0, 9)}"

            System.Drawing.Color randomColor = System.Drawing.Color.FromArgb(rand.Next(256), rand.Next(256), rand.Next(256));
            return &quot#&quot + randomColor.R.ToString(&quotX2&quot) + randomColor.G.ToString(&quotX2&quot) + randomColor.B.ToString(&quotX2&quot);


            //var colorList = Enum.GetValues(typeof(KnownColor)).Cast<KnownColor>().ToList();
            //var colorName = colorList[rand.Next(0, colorList.Count())];
            //var value = System.Drawing.Color.FromName(colorName.ToString()).ToArgb();
            //return string.Format(&quot#{0:x6}&quot, value);

        }

تموم شد.

این نکته رو بگم که کدها برای نمونه هستن و مسلما بهتون جواب نمیدن چون باید تغییراتی توشون بدین مثل آدرس دیتابیس یا آدرس URL ها.

این نوع نوشته های من دوتا جنبه رو دنبال میکنه.دوستان با کدهای توی سازمانها آشنا بشن. و اگر دوستی کدبهینه تر داشت مطرح کنه. البته یه جنبه دیگه جا افتاد، بچه های تازه وارد توی شرکت ما بتونن از این کدها استفاده کنن و بدونن مثلا برای زدن چارت چکار باید کنند.