197 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			197 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
	
	
| import { fT as useCssVar, hI as merge } from "./index-CeNA_ukL.js";
 | |
| import { s as smartDecimal } from "./InsightsSummary-Bypgyn1_.js";
 | |
| const generateLinearGradient = (ctx, height) => {
 | |
|   const gradient = ctx.createLinearGradient(0, 0, 0, height);
 | |
|   gradient.addColorStop(0, "rgba(255, 111,92, 1)");
 | |
|   gradient.addColorStop(0.8, "rgba(255, 111, 92, 0.25)");
 | |
|   gradient.addColorStop(1, "rgba(255, 111, 92, 0)");
 | |
|   return gradient;
 | |
| };
 | |
| const generateLineChartOptions = (overrides = {}) => {
 | |
|   const colorTextDark = useCssVar("--color-text-dark", document.body);
 | |
|   const colorBackgroundLight = useCssVar("--color-background-xlight", document.body);
 | |
|   const colorForeGroundBase = useCssVar("--color-foreground-base", document.body);
 | |
|   const colorTextLight = useCssVar("--color-text-light", document.body);
 | |
|   return merge(
 | |
|     {
 | |
|       responsive: true,
 | |
|       maintainAspectRatio: false,
 | |
|       animation: false,
 | |
|       plugins: {
 | |
|         legend: {
 | |
|           display: false
 | |
|         },
 | |
|         tooltip: {
 | |
|           caretSize: 0,
 | |
|           xAlign: "center",
 | |
|           yAlign: "bottom",
 | |
|           padding: 16,
 | |
|           titleFont: {
 | |
|             size: 14
 | |
|           },
 | |
|           bodyFont: {
 | |
|             size: 14
 | |
|           },
 | |
|           backgroundColor: colorBackgroundLight.value,
 | |
|           titleColor: colorTextDark.value,
 | |
|           bodyColor: colorTextDark.value,
 | |
|           borderWidth: 1,
 | |
|           borderColor: colorForeGroundBase.value,
 | |
|           callbacks: {
 | |
|             label(context) {
 | |
|               const label = context.dataset.label ?? "";
 | |
|               return `${label} ${smartDecimal(context.parsed.y).toLocaleString("en-US")}`;
 | |
|             },
 | |
|             labelColor(context) {
 | |
|               return {
 | |
|                 borderColor: "rgba(0, 0, 0, 0)",
 | |
|                 backgroundColor: context.dataset.backgroundColor,
 | |
|                 borderWidth: 0,
 | |
|                 borderRadius: 2
 | |
|               };
 | |
|             }
 | |
|           }
 | |
|         }
 | |
|       },
 | |
|       interaction: {
 | |
|         mode: "nearest",
 | |
|         axis: "x",
 | |
|         intersect: false
 | |
|       },
 | |
|       scales: {
 | |
|         x: {
 | |
|           grid: {
 | |
|             display: false
 | |
|           },
 | |
|           stacked: true,
 | |
|           beginAtZero: true,
 | |
|           border: {
 | |
|             display: false
 | |
|           },
 | |
|           ticks: {
 | |
|             color: colorTextLight.value
 | |
|           }
 | |
|         },
 | |
|         y: {
 | |
|           grid: {
 | |
|             color: colorForeGroundBase.value
 | |
|           },
 | |
|           stacked: true,
 | |
|           border: {
 | |
|             display: false
 | |
|           },
 | |
|           ticks: {
 | |
|             maxTicksLimit: 3,
 | |
|             color: colorTextLight.value
 | |
|           }
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     overrides
 | |
|   );
 | |
| };
 | |
| const generateBarChartOptions = (overrides = {}) => {
 | |
|   const colorTextLight = useCssVar("--color-text-light", document.body);
 | |
|   const colorTextDark = useCssVar("--color-text-dark", document.body);
 | |
|   const colorBackgroundLight = useCssVar("--color-background-xlight", document.body);
 | |
|   const colorForeGroundBase = useCssVar("--color-foreground-base", document.body);
 | |
|   return merge(
 | |
|     {
 | |
|       responsive: true,
 | |
|       maintainAspectRatio: false,
 | |
|       animation: false,
 | |
|       plugins: {
 | |
|         legend: {
 | |
|           display: true,
 | |
|           align: "end",
 | |
|           reverse: true,
 | |
|           position: "top",
 | |
|           labels: {
 | |
|             boxWidth: 8,
 | |
|             boxHeight: 8,
 | |
|             borderRadius: 2,
 | |
|             useBorderRadius: true,
 | |
|             color: colorTextLight.value
 | |
|           }
 | |
|         },
 | |
|         tooltip: {
 | |
|           caretSize: 0,
 | |
|           xAlign: "center",
 | |
|           yAlign: "bottom",
 | |
|           padding: 16,
 | |
|           titleFont: {
 | |
|             size: 14
 | |
|           },
 | |
|           bodyFont: {
 | |
|             size: 14
 | |
|           },
 | |
|           backgroundColor: colorBackgroundLight.value,
 | |
|           titleColor: colorTextDark.value,
 | |
|           bodyColor: colorTextDark.value,
 | |
|           borderWidth: 1,
 | |
|           borderColor: colorForeGroundBase.value,
 | |
|           callbacks: {
 | |
|             label(context) {
 | |
|               const label = context.dataset.label ?? "";
 | |
|               return `${label} ${context.parsed.y}`;
 | |
|             },
 | |
|             labelColor(context) {
 | |
|               return {
 | |
|                 borderColor: "rgba(0, 0, 0, 0)",
 | |
|                 backgroundColor: context.dataset.backgroundColor,
 | |
|                 borderWidth: 0,
 | |
|                 borderRadius: 2
 | |
|               };
 | |
|             }
 | |
|           }
 | |
|         }
 | |
|       },
 | |
|       interaction: {
 | |
|         mode: "nearest",
 | |
|         axis: "x",
 | |
|         intersect: false
 | |
|       },
 | |
|       datasets: {
 | |
|         bar: {
 | |
|           maxBarThickness: 32,
 | |
|           borderRadius: 4
 | |
|         }
 | |
|       },
 | |
|       scales: {
 | |
|         x: {
 | |
|           grid: {
 | |
|             display: false
 | |
|           },
 | |
|           stacked: true,
 | |
|           beginAtZero: true,
 | |
|           border: {
 | |
|             display: false
 | |
|           },
 | |
|           ticks: {
 | |
|             color: colorTextLight.value
 | |
|           }
 | |
|         },
 | |
|         y: {
 | |
|           grid: {
 | |
|             color: colorForeGroundBase.value
 | |
|           },
 | |
|           stacked: true,
 | |
|           border: {
 | |
|             display: false
 | |
|           },
 | |
|           ticks: {
 | |
|             maxTicksLimit: 3,
 | |
|             color: colorTextLight.value
 | |
|           }
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     overrides
 | |
|   );
 | |
| };
 | |
| export {
 | |
|   generateLineChartOptions as a,
 | |
|   generateLinearGradient as b,
 | |
|   generateBarChartOptions as g
 | |
| };
 |