_agents.js
1 year ago
_calendar.js
3 months ago
_chart.js
9 months ago
_customers.js
1 year ago
_customers_import.js
9 months ago
_delete-confirm.js
1 week ago
_orders.js
9 months ago
_processes.js
1 year ago
_razorpay_connect.js
1 month ago
_steps.js
9 months ago
_stripe_connect.js
1 year ago
main.js
2 weeks ago
updates.js
3 months ago
_chart.js
379 lines
| 1 | /* |
| 2 | * Copyright (c) 2023 LatePoint LLC. All rights reserved. |
| 3 | */ |
| 4 | |
| 5 | |
| 6 | function latepoint_init_daily_bookings_chart() { |
| 7 | if (typeof Chart === 'undefined' || !jQuery('#chartDailyBookings').length) return |
| 8 | |
| 9 | let $dailyBookingsChart = jQuery('#chartDailyBookings'); |
| 10 | let dailyBookingsLabels = $dailyBookingsChart.data('chart-labels').toString().split(','); |
| 11 | let dailyBookingsValues = $dailyBookingsChart.data('chart-values').toString().split(',').map(Number); |
| 12 | let dailyBookingsChartMax = Math.max.apply(Math, dailyBookingsValues); |
| 13 | // calculate max Y to have space for a tooltip |
| 14 | let canvasHeight = 200 |
| 15 | let spaceForTooltip = 160 |
| 16 | let maxValue = dailyBookingsChartMax + spaceForTooltip * dailyBookingsChartMax / canvasHeight + 1 |
| 17 | |
| 18 | |
| 19 | var fontFamily = latepoint_helper.body_font_family; |
| 20 | |
| 21 | Chart.Tooltip.positioners.top = function (items) { |
| 22 | const pos = Chart.Tooltip.positioners.average(items); |
| 23 | |
| 24 | // Happens when nothing is found |
| 25 | if (pos === false) { |
| 26 | return false; |
| 27 | } |
| 28 | |
| 29 | const chart = this.chart; |
| 30 | |
| 31 | return { |
| 32 | x: pos.x, |
| 33 | y: chart.chartArea.top, |
| 34 | xAlign: 'center', |
| 35 | yAlign: 'bottom', |
| 36 | }; |
| 37 | }; |
| 38 | |
| 39 | Chart.defaults.defaultFontFamily = fontFamily; |
| 40 | Chart.defaults.defaultFontSize = 18; |
| 41 | Chart.defaults.defaultFontStyle = '400'; |
| 42 | Chart.defaults.plugins.tooltip.titleFont = { |
| 43 | family: fontFamily, |
| 44 | size: 14, |
| 45 | color: 'rgba(255,255,255,0.6)', |
| 46 | style: 'normal', |
| 47 | weight: 400 |
| 48 | } |
| 49 | |
| 50 | Chart.defaults.plugins.tooltip.titleFont = {family: fontFamily, size: 14, weight: 400}; |
| 51 | Chart.defaults.plugins.tooltip.titleColor = 'rgba(255,255,255,0.6)'; |
| 52 | Chart.defaults.plugins.tooltip.backgroundColor = '#000'; |
| 53 | Chart.defaults.plugins.tooltip.titleMarginBottom = 5; |
| 54 | Chart.defaults.plugins.tooltip.bodyFont = {family: fontFamily, size: 24, weight: 700, lineHeight: 0.8}; |
| 55 | Chart.defaults.plugins.tooltip.displayColors = false; |
| 56 | Chart.defaults.plugins.tooltip.padding = 10; |
| 57 | Chart.defaults.plugins.tooltip.yAlign = 'bottom'; |
| 58 | Chart.defaults.plugins.tooltip.xAlign = 'center'; |
| 59 | Chart.defaults.plugins.tooltip.cornerRadius = 14; |
| 60 | Chart.defaults.plugins.tooltip.caretSize = 5; |
| 61 | Chart.defaults.plugins.tooltip.position = 'top'; |
| 62 | |
| 63 | var ctx = $dailyBookingsChart[0].getContext("2d"); |
| 64 | var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0); |
| 65 | gradientStroke.addColorStop(0, '#219ff8'); |
| 66 | gradientStroke.addColorStop(1, '#219ff8'); |
| 67 | |
| 68 | |
| 69 | let gradientFill = ctx.createLinearGradient(0, 0, 0, 140); |
| 70 | gradientFill.addColorStop(0, 'rgba(195, 229, 253, 0.9)'); |
| 71 | gradientFill.addColorStop(1, 'rgba(195, 229, 253, 0.1)'); |
| 72 | |
| 73 | // line chart data |
| 74 | var chartDailyBookingsData = { |
| 75 | labels: dailyBookingsLabels, |
| 76 | datasets: [{ |
| 77 | backgroundColor: gradientFill, |
| 78 | borderColor: gradientStroke, |
| 79 | label: "", |
| 80 | fill: true, |
| 81 | lineTension: 0.3, |
| 82 | borderWidth: 2, |
| 83 | borderCapStyle: 'butt', |
| 84 | borderDash: [], |
| 85 | borderDashOffset: 0.0, |
| 86 | borderJoinStyle: 'miter', |
| 87 | pointBorderColor: "#fff", |
| 88 | pointBackgroundColor: "#219ff8", |
| 89 | pointRadius: 3, |
| 90 | pointBorderWidth: 2, |
| 91 | pointHoverRadius: 6, |
| 92 | pointHoverBorderWidth: 4, |
| 93 | pointHoverBackgroundColor: "#219ff8", |
| 94 | pointHoverBorderColor: "#fff", |
| 95 | pointHitRadius: 20, |
| 96 | spanGaps: false, |
| 97 | data: dailyBookingsValues, |
| 98 | }] |
| 99 | }; |
| 100 | |
| 101 | |
| 102 | let options = { |
| 103 | animation: false, |
| 104 | layout: { |
| 105 | padding: { |
| 106 | top: 0 |
| 107 | } |
| 108 | }, |
| 109 | interaction: { |
| 110 | mode: 'index', |
| 111 | intersect: false, |
| 112 | }, |
| 113 | maintainAspectRatio: false, |
| 114 | plugins: { |
| 115 | verticalLiner: {}, |
| 116 | legend: { |
| 117 | display: false |
| 118 | }, |
| 119 | }, |
| 120 | scales: { |
| 121 | x: { |
| 122 | display: true, |
| 123 | ticks: { |
| 124 | fontFamily: fontFamily, |
| 125 | maxRotation: 0, |
| 126 | color: '#788291', |
| 127 | font: { |
| 128 | size: 10, |
| 129 | family: fontFamily |
| 130 | }, |
| 131 | callback: function (value, index, ticks) { |
| 132 | if(ticks.length){ |
| 133 | return ((index + 2) % Math.round(ticks.length/8)) ? '' : this.getLabelForValue(value) |
| 134 | }else{ |
| 135 | return this.getLabelForValue(value) |
| 136 | } |
| 137 | } |
| 138 | }, |
| 139 | grid: { |
| 140 | borderDash: [1, 5], |
| 141 | color: 'rgba(0,0,0,0.35)', |
| 142 | zeroLineColor: 'rgba(0,0,0,0.15)', |
| 143 | }, |
| 144 | }, |
| 145 | y: { |
| 146 | max: maxValue, |
| 147 | grid: { |
| 148 | color: 'rgba(0,0,0,0.05)', |
| 149 | zeroLineColor: 'rgba(0,0,0,0.05)', |
| 150 | }, |
| 151 | display: false, |
| 152 | ticks: { |
| 153 | beginAtZero: true, |
| 154 | fontSize: '10', |
| 155 | fontColor: '#000' |
| 156 | } |
| 157 | } |
| 158 | |
| 159 | } |
| 160 | } |
| 161 | |
| 162 | const plugin = { |
| 163 | id: 'verticalLiner', |
| 164 | afterInit: (chart, args, opts) => { |
| 165 | chart.verticalLiner = {} |
| 166 | }, |
| 167 | afterEvent: (chart, args, options) => { |
| 168 | const {inChartArea} = args |
| 169 | chart.verticalLiner = {draw: inChartArea} |
| 170 | }, |
| 171 | beforeTooltipDraw: (chart, args, options) => { |
| 172 | const {draw} = chart.verticalLiner |
| 173 | if (!draw) return |
| 174 | |
| 175 | const {ctx} = chart |
| 176 | const {top, bottom} = chart.chartArea |
| 177 | const {tooltip} = args |
| 178 | const x = tooltip.caretX |
| 179 | if (!x) return |
| 180 | |
| 181 | ctx.save() |
| 182 | |
| 183 | ctx.beginPath() |
| 184 | ctx.moveTo(x, top) |
| 185 | ctx.lineTo(x, bottom) |
| 186 | ctx.stroke() |
| 187 | |
| 188 | ctx.restore() |
| 189 | } |
| 190 | } |
| 191 | |
| 192 | // line chart init |
| 193 | let chartDailyBookings = new Chart($dailyBookingsChart, { |
| 194 | type: 'line', |
| 195 | data: chartDailyBookingsData, |
| 196 | options: options, |
| 197 | plugins: [plugin], |
| 198 | }); |
| 199 | } |
| 200 | |
| 201 | |
| 202 | function latepoint_init_customer_donut_chart() { |
| 203 | if (typeof Chart !== 'undefined' && jQuery('.os-customer-donut-chart').length) { |
| 204 | var fontFamily = latepoint_helper.body_font_family; |
| 205 | // set defaults |
| 206 | Chart.defaults.defaultFontFamily = fontFamily; |
| 207 | Chart.defaults.defaultFontSize = 16; |
| 208 | Chart.defaults.defaultFontStyle = '400'; |
| 209 | |
| 210 | Chart.defaults.plugins.tooltip.titleFont = {family: fontFamily, size: 14, weight: 400}; |
| 211 | Chart.defaults.plugins.tooltip.titleColor = 'rgba(255,255,255,0.6)'; |
| 212 | Chart.defaults.plugins.tooltip.backgroundColor = '#000'; |
| 213 | Chart.defaults.plugins.tooltip.titleMarginBottom = 1; |
| 214 | Chart.defaults.plugins.tooltip.bodyFont = {family: fontFamily, size: 18, weight: 500}; |
| 215 | Chart.defaults.plugins.tooltip.displayColors = false; |
| 216 | Chart.defaults.plugins.tooltip.padding = 5; |
| 217 | Chart.defaults.plugins.tooltip.yAlign = 'bottom'; |
| 218 | Chart.defaults.plugins.tooltip.xAlign = 'center'; |
| 219 | Chart.defaults.plugins.tooltip.cornerRadius = 4; |
| 220 | Chart.defaults.plugins.tooltip.intersect = false; |
| 221 | jQuery('.os-customer-donut-chart').each(function (index) { |
| 222 | var chart_colors = jQuery(this).data('chart-colors').toString().split(','); |
| 223 | var chart_labels = jQuery(this).data('chart-labels').toString().split(','); |
| 224 | var chart_values = jQuery(this).data('chart-values').toString().split(',').map(Number); |
| 225 | var $chart_canvas = jQuery(this); |
| 226 | var chartDonut = new Chart($chart_canvas, { |
| 227 | type: 'doughnut', |
| 228 | data: { |
| 229 | labels: chart_labels, |
| 230 | datasets: [{ |
| 231 | data: chart_values, |
| 232 | backgroundColor: chart_colors, |
| 233 | hoverBackgroundColor: chart_colors, |
| 234 | borderWidth: 0, |
| 235 | hoverBorderColor: 'transparent' |
| 236 | }] |
| 237 | }, |
| 238 | options: { |
| 239 | layout: { |
| 240 | padding: { |
| 241 | top: 10, |
| 242 | bottom: 10, |
| 243 | left: 10, |
| 244 | right: 10 |
| 245 | } |
| 246 | }, |
| 247 | plugins: { |
| 248 | legend: { |
| 249 | display: false |
| 250 | }, |
| 251 | tooltip: { |
| 252 | callbacks: { |
| 253 | title: function (tooltipItem) { |
| 254 | return tooltipItem[0].label; |
| 255 | }, |
| 256 | label: function (tooltipItem) { |
| 257 | return tooltipItem.parsed; |
| 258 | }, |
| 259 | } |
| 260 | }, |
| 261 | }, |
| 262 | animation: { |
| 263 | animateRotate: false |
| 264 | }, |
| 265 | cutout: "90%", |
| 266 | responsive: false, |
| 267 | maintainAspectRatio: true, |
| 268 | } |
| 269 | }); |
| 270 | }); |
| 271 | } |
| 272 | } |
| 273 | |
| 274 | function latepoint_init_donut_charts() { |
| 275 | if (typeof Chart !== 'undefined' && jQuery('.os-donut-chart').length) { |
| 276 | var fontFamily = latepoint_helper.body_font_family; |
| 277 | // set defaults |
| 278 | Chart.defaults.defaultFontFamily = fontFamily; |
| 279 | Chart.defaults.defaultFontSize = 18; |
| 280 | Chart.defaults.defaultFontStyle = '400'; |
| 281 | |
| 282 | Chart.defaults.plugins.tooltip.titleFont.family = fontFamily; |
| 283 | Chart.defaults.plugins.tooltip.titleFont.size = 14; |
| 284 | Chart.defaults.plugins.tooltip.titleColor = 'rgba(255,255,255,0.6)'; |
| 285 | Chart.defaults.plugins.tooltip.backgroundColor = '#000'; |
| 286 | Chart.defaults.plugins.tooltip.titleFont.style = '400'; |
| 287 | Chart.defaults.plugins.tooltip.titleMarginBottom = 1; |
| 288 | Chart.defaults.plugins.tooltip.bodyFont.family = fontFamily; |
| 289 | Chart.defaults.plugins.tooltip.bodyFont.size = 24; |
| 290 | Chart.defaults.plugins.tooltip.bodyFont.style = '500'; |
| 291 | Chart.defaults.plugins.tooltip.displayColors = false; |
| 292 | Chart.defaults.plugins.tooltip.padding.x = 10; |
| 293 | Chart.defaults.plugins.tooltip.padding.y = 8; |
| 294 | Chart.defaults.plugins.tooltip.yAlign = 'bottom'; |
| 295 | Chart.defaults.plugins.tooltip.xAlign = 'center'; |
| 296 | Chart.defaults.plugins.tooltip.cornerRadius = 8; |
| 297 | Chart.defaults.plugins.tooltip.intersect = false; |
| 298 | jQuery('.os-donut-chart').each(function (index) { |
| 299 | var chart_colors = jQuery(this).data('chart-colors').toString().split(','); |
| 300 | var chart_labels = jQuery(this).data('chart-labels').toString().split(','); |
| 301 | var chart_values = jQuery(this).data('chart-values').toString().split(',').map(Number); |
| 302 | var $chart_canvas = jQuery(this); |
| 303 | var chartDonut = new Chart($chart_canvas, { |
| 304 | type: 'doughnut', |
| 305 | data: { |
| 306 | labels: chart_labels, |
| 307 | datasets: [{ |
| 308 | data: chart_values, |
| 309 | backgroundColor: chart_colors, |
| 310 | hoverBackgroundColor: chart_colors, |
| 311 | borderWidth: 0, |
| 312 | hoverBorderColor: 'transparent' |
| 313 | }] |
| 314 | }, |
| 315 | options: { |
| 316 | layout: { |
| 317 | padding: { |
| 318 | top: 40 |
| 319 | } |
| 320 | }, |
| 321 | plugins: { |
| 322 | legend: { |
| 323 | display: false |
| 324 | }, |
| 325 | tooltip: { |
| 326 | callbacks: { |
| 327 | title: function (tooltipItem, data) { |
| 328 | return data['labels'][tooltipItem[0]['index']]; |
| 329 | }, |
| 330 | label: function (tooltipItem, data) { |
| 331 | return data['datasets'][0]['data'][tooltipItem['index']]; |
| 332 | } |
| 333 | } |
| 334 | } |
| 335 | }, |
| 336 | animation: { |
| 337 | animateScale: true |
| 338 | }, |
| 339 | cutoutPercentage: 96, |
| 340 | responsive: false, |
| 341 | maintainAspectRatio: true, |
| 342 | } |
| 343 | }); |
| 344 | }); |
| 345 | } |
| 346 | } |
| 347 | |
| 348 | |
| 349 | function latepoint_init_circles_charts() { |
| 350 | jQuery('.circle-chart').each(function (index) { |
| 351 | var chart_elem_id = jQuery(this).prop('id'); |
| 352 | var max_value = jQuery(this).data('max-value'); |
| 353 | var chart_value = jQuery(this).data('chart-value'); |
| 354 | var chart_color = jQuery(this).data('chart-color'); |
| 355 | var chart_color_fade = jQuery(this).data('chart-color-fade'); |
| 356 | var myCircle = Circles.create({ |
| 357 | id: chart_elem_id, |
| 358 | radius: 25, |
| 359 | value: chart_value, |
| 360 | maxValue: max_value, |
| 361 | width: 2, |
| 362 | text: function (value) { |
| 363 | return Math.round(value); |
| 364 | }, |
| 365 | colors: [chart_color, chart_color_fade], |
| 366 | duration: 200, |
| 367 | wrpClass: 'circles-wrp', |
| 368 | textClass: 'circles-text', |
| 369 | valueStrokeClass: 'circles-valueStroke', |
| 370 | maxValueStrokeClass: 'circles-maxValueStroke', |
| 371 | styleWrapper: true, |
| 372 | styleText: true |
| 373 | }); |
| 374 | |
| 375 | }); |
| 376 | |
| 377 | |
| 378 | } |
| 379 |