charts.8e6a43b1.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787
  1. import{c as q,_ as c,I as h}from"./icon-code.6d7a3662.js";import{d as H,u as K,b as Q,A as p,e as m,c as Z,a as e,f as o,j as s,g as u,W as f,w as b,l as g,o as l,a4 as k}from"./index.c685e846.js";import{I as ee}from"./icon-bell.2e21c889.js";const te=e("ul",{class:"flex space-x-2 rtl:space-x-reverse mb-6"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Dashboard")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"Charts")])],-1),se={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},ae={class:"panel lg:col-span-2 p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},re={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},oe=e("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),ie=e("a",{href:"https://www.npmjs.com/package/vue3-apexcharts",target:"_blank",class:"block hover:underline"},"https://www.npmjs.com/package/vue3-apexcharts",-1),le={class:"panel"},ne={class:"flex items-center justify-between mb-5"},de=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Simple Line",-1),ce={class:"flex items-center"},he={class:"mb-5"},pe=e("pre",null,`<!-- simple line -->
  2. <apexchart height="300" :options="lineChart" :series="lineChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  3. <!-- script -->
  4. <script lang="ts" setup>
  5. import { ref, computed } from 'vue';
  6. import apexchart from 'vue3-apexcharts';
  7. import { useAppStore } from '@/stores/index';
  8. const store = useAppStore();
  9. const lineChart = computed(() => {
  10. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  11. const isRtl = store.rtlClass === 'rtl' ? true : false;
  12. return {
  13. chart: {
  14. height: 300,
  15. type: 'line',
  16. toolbar: false,
  17. },
  18. colors: ['#4361ee'],
  19. tooltip: {
  20. marker: false,
  21. y: {
  22. formatter(number) {
  23. return '$' + number;
  24. },
  25. },
  26. theme: isDark ? 'dark' : 'light',
  27. },
  28. stroke: {
  29. width: 2,
  30. curve: 'smooth',
  31. },
  32. xaxis: {
  33. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
  34. axisBorder: {
  35. color: isDark ? '#191e3a' : '#e0e6ed',
  36. },
  37. },
  38. yaxis: {
  39. opposite: isRtl ? true : false,
  40. labels: {
  41. offsetX: isRtl ? -20 : 0,
  42. },
  43. },
  44. grid: {
  45. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  46. },
  47. };
  48. });
  49. const lineChartSeries = ref([
  50. {
  51. name: 'Sales',
  52. data: [45, 55, 75, 25, 45, 110],
  53. },
  54. ]);
  55. <\/script>
  56. `,-1),me={class:"panel"},ue={class:"flex items-center justify-between mb-5"},fe=e("h5",{class:"font-semibold text-lg dark:text-white"},"Simple Area",-1),be={class:"flex items-center"},ge={class:"mb-5"},ke=e("pre",null,`<!-- simple area -->
  57. <apexchart height="300" :options="areaChart" :series="areaChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  58. <!-- script -->
  59. <script lang="ts" setup>
  60. import { ref, computed } from 'vue';
  61. import apexchart from 'vue3-apexcharts';
  62. import { useAppStore } from '@/stores/index';
  63. const store = useAppStore();
  64. const areaChart = computed(() => {
  65. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  66. const isRtl = store.rtlClass === 'rtl' ? true : false;
  67. return {
  68. chart: {
  69. type: 'area',
  70. height: 300,
  71. zoom: {
  72. enabled: false,
  73. },
  74. toolbar: {
  75. show: false,
  76. },
  77. },
  78. colors: ['#805dca'],
  79. dataLabels: {
  80. enabled: false,
  81. },
  82. stroke: {
  83. width: 2,
  84. curve: 'smooth',
  85. },
  86. xaxis: {
  87. axisBorder: {
  88. color: isDark ? '#191e3a' : '#e0e6ed',
  89. },
  90. },
  91. yaxis: {
  92. opposite: isRtl ? true : false,
  93. labels: {
  94. offsetX: isRtl ? -40 : 0,
  95. },
  96. },
  97. labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  98. legend: {
  99. horizontalAlign: 'left',
  100. },
  101. grid: {
  102. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  103. },
  104. tooltip: {
  105. theme: isDark ? 'dark' : 'light',
  106. },
  107. };
  108. });
  109. const areaChartSeries = ref([
  110. {
  111. name: 'Income',
  112. data: [16800, 16800, 15500, 17800, 15500, 17000, 19000, 16000, 15000, 17000, 14000, 17000],
  113. },
  114. ]);
  115. <\/script>
  116. `,-1),xe={class:"panel"},ve={class:"flex items-center justify-between mb-5"},ye=e("h5",{class:"font-semibold text-lg dark:text-white"},"Simple Column",-1),_e={class:"flex items-center"},Ce={class:"mb-5"},we=e("pre",null,`<!-- simple column -->
  117. <apexchart height="300" :options="columnChart" :series="columnChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  118. <!-- script -->
  119. <script lang="ts" setup>
  120. import { ref, computed } from 'vue';
  121. import apexchart from 'vue3-apexcharts';
  122. import { useAppStore } from '@/stores/index';
  123. const store = useAppStore();
  124. const columnChart = computed(() => {
  125. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  126. const isRtl = store.rtlClass === 'rtl' ? true : false;
  127. return {
  128. chart: {
  129. height: 300,
  130. type: 'bar',
  131. zoom: {
  132. enabled: false,
  133. },
  134. toolbar: {
  135. show: false,
  136. },
  137. },
  138. colors: ['#805dca', '#e7515a'],
  139. dataLabels: {
  140. enabled: false,
  141. },
  142. stroke: {
  143. show: true,
  144. width: 2,
  145. colors: ['transparent'],
  146. },
  147. plotOptions: {
  148. bar: {
  149. horizontal: false,
  150. columnWidth: '55%',
  151. endingShape: 'rounded',
  152. },
  153. },
  154. grid: {
  155. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  156. },
  157. xaxis: {
  158. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
  159. axisBorder: {
  160. color: isDark ? '#191e3a' : '#e0e6ed',
  161. },
  162. },
  163. yaxis: {
  164. opposite: isRtl ? true : false,
  165. labels: {
  166. offsetX: isRtl ? -10 : 0,
  167. },
  168. },
  169. tooltip: {
  170. theme: isDark ? 'dark' : 'light',
  171. y: {
  172. formatter: function (val) {
  173. return val;
  174. },
  175. },
  176. },
  177. };
  178. });
  179. const columnChartSeries = ref([
  180. {
  181. name: 'Net Profit',
  182. data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
  183. },
  184. {
  185. name: 'Revenue',
  186. data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
  187. },
  188. ]);
  189. <\/script>
  190. `,-1),Se={class:"panel"},De={class:"flex items-center justify-between mb-5"},Me=e("h5",{class:"font-semibold text-lg dark:text-white"},"Simple Column Stacked",-1),Ae={class:"flex items-center"},Te={class:"mb-5"},Be=e("pre",null,`<!-- simple column stacked -->
  191. <apexchart height="300" :options="simpleColumnStacked" :series="simpleColumnStackedSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  192. <!-- script -->
  193. <script lang="ts" setup>
  194. import { ref, computed } from 'vue';
  195. import apexchart from 'vue3-apexcharts';
  196. import { useAppStore } from '@/stores/index';
  197. const store = useAppStore();
  198. const simpleColumnStacked = computed(() => {
  199. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  200. const isRtl = store.rtlClass === 'rtl' ? true : false;
  201. return {
  202. chart: {
  203. height: 300,
  204. type: 'bar',
  205. stacked: true,
  206. zoom: {
  207. enabled: false,
  208. },
  209. toolbar: {
  210. show: false,
  211. },
  212. },
  213. colors: ['#2196f3', '#3b3f5c'],
  214. responsive: [
  215. {
  216. breakpoint: 480,
  217. options: {
  218. legend: {
  219. position: 'bottom',
  220. offsetX: -10,
  221. offsetY: 5,
  222. },
  223. },
  224. },
  225. ],
  226. plotOptions: {
  227. bar: {
  228. horizontal: false,
  229. },
  230. },
  231. xaxis: {
  232. type: 'datetime',
  233. categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
  234. axisBorder: {
  235. color: isDark ? '#191e3a' : '#e0e6ed',
  236. },
  237. },
  238. yaxis: {
  239. opposite: isRtl ? true : false,
  240. labels: {
  241. offsetX: isRtl ? -20 : 0,
  242. },
  243. },
  244. grid: {
  245. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  246. },
  247. legend: {
  248. position: 'right',
  249. offsetY: 40,
  250. },
  251. tooltip: {
  252. theme: isDark ? 'dark' : 'light',
  253. },
  254. fill: {
  255. opacity: 0.8,
  256. },
  257. };
  258. });
  259. const simpleColumnStackedSeries = ref([
  260. {
  261. name: 'PRODUCT A',
  262. data: [44, 55, 41, 67, 22, 43],
  263. },
  264. {
  265. name: 'PRODUCT B',
  266. data: [13, 23, 20, 8, 13, 27],
  267. },
  268. ]);
  269. <\/script>
  270. `,-1),ze={class:"panel"},Re={class:"flex items-center justify-between mb-5"},je=e("h5",{class:"font-semibold text-lg dark:text-white"},"Simple Bar",-1),Oe={class:"flex items-center"},Je={class:"mb-5"},Fe=e("pre",null,`<!-- simple bar -->
  271. <apexchart height="300" :options="barChart" :series="barChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  272. <!-- script -->
  273. <script lang="ts" setup>
  274. import { ref, computed } from 'vue';
  275. import apexchart from 'vue3-apexcharts';
  276. import { useAppStore } from '@/stores/index';
  277. const store = useAppStore();
  278. const barChart = computed(() => {
  279. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  280. const isRtl = store.rtlClass === 'rtl' ? true : false;
  281. return {
  282. chart: {
  283. height: 300,
  284. type: 'bar',
  285. zoom: {
  286. enabled: false,
  287. },
  288. toolbar: {
  289. show: false,
  290. },
  291. },
  292. dataLabels: {
  293. enabled: false,
  294. },
  295. stroke: {
  296. show: true,
  297. width: 1,
  298. },
  299. colors: ['#4361ee'],
  300. xaxis: {
  301. categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
  302. axisBorder: {
  303. color: isDark ? '#191e3a' : '#e0e6ed',
  304. },
  305. },
  306. yaxis: {
  307. opposite: isRtl ? true : false,
  308. reversed: isRtl ? true : false,
  309. },
  310. grid: {
  311. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  312. },
  313. plotOptions: {
  314. bar: {
  315. horizontal: true,
  316. },
  317. },
  318. fill: {
  319. opacity: 0.8,
  320. },
  321. };
  322. });
  323. const barChartSeries = ref([
  324. {
  325. name: 'Sales',
  326. data: [44, 55, 41, 67, 22, 43, 21, 70],
  327. },
  328. ]);
  329. <\/script>
  330. `,-1),Ge={class:"panel"},$e={class:"flex items-center justify-between mb-5"},Xe=e("h5",{class:"font-semibold text-lg dark:text-white"},"Mixed",-1),Le={class:"flex items-center"},Pe={class:"mb-5"},Ee=e("pre",null,`<!-- mixed -->
  331. <apexchart height="300" :options="mixedChart" :series="mixedChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  332. <!-- script -->
  333. <script lang="ts" setup>
  334. import { ref, computed } from 'vue';
  335. import apexchart from 'vue3-apexcharts';
  336. import { useAppStore } from '@/stores/index';
  337. const store = useAppStore();
  338. const mixedChart = computed(() => {
  339. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  340. const isRtl = store.rtlClass === 'rtl' ? true : false;
  341. return {
  342. chart: {
  343. height: 300,
  344. // stacked: false,
  345. zoom: {
  346. enabled: false,
  347. },
  348. toolbar: {
  349. show: false,
  350. },
  351. },
  352. colors: ['#2196f3', '#00ab55', '#4361ee'],
  353. stroke: {
  354. width: [0, 2, 2],
  355. curve: 'smooth',
  356. },
  357. plotOptions: {
  358. bar: {
  359. columnWidth: '50%',
  360. },
  361. },
  362. fill: {
  363. opacity: [1, 0.25, 1],
  364. },
  365. labels: ['01/01/2022', '02/01/2022', '03/01/2022', '04/01/2022', '05/01/2022', '06/01/2022', '07/01/2022', '08/01/2022', '09/01/2022', '10/01/2022', '11/01/2022'],
  366. markers: {
  367. size: 0,
  368. },
  369. xaxis: {
  370. type: 'datetime',
  371. axisBorder: {
  372. color: isDark ? '#191e3a' : '#e0e6ed',
  373. },
  374. },
  375. yaxis: {
  376. title: {
  377. text: 'Points',
  378. },
  379. min: 0,
  380. opposite: isRtl ? true : false,
  381. labels: {
  382. offsetX: isRtl ? -10 : 0,
  383. },
  384. },
  385. grid: {
  386. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  387. },
  388. tooltip: {
  389. shared: true,
  390. intersect: false,
  391. theme: isDark ? 'dark' : 'light',
  392. y: {
  393. formatter: (y) => {
  394. if (typeof y !== 'undefined') {
  395. return y.toFixed(0) + ' points';
  396. }
  397. return y;
  398. },
  399. },
  400. },
  401. legend: {
  402. itemMargin: {
  403. horizontal: 4,
  404. vertical: 8,
  405. },
  406. },
  407. };
  408. });
  409. const mixedChartSeries = ref([
  410. {
  411. name: 'TEAM A',
  412. type: 'column',
  413. data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
  414. },
  415. {
  416. name: 'TEAM B',
  417. type: 'area',
  418. data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
  419. },
  420. {
  421. name: 'TEAM C',
  422. type: 'line',
  423. data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
  424. },
  425. ]);
  426. <\/script>
  427. `,-1),Ne={class:"panel"},We={class:"flex items-center justify-between mb-5"},Ie=e("h5",{class:"font-semibold text-lg dark:text-white"},"Basic Radar",-1),Ue={class:"flex items-center"},Ve={class:"mb-5"},Ye=e("pre",null,`<!-- basic radar -->
  428. <apexchart height="300" :options="radarChart" :series="radarChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  429. <!-- script -->
  430. <script lang="ts" setup>
  431. import { ref, computed } from 'vue';
  432. import apexchart from 'vue3-apexcharts';
  433. import { useAppStore } from '@/stores/index';
  434. const store = useAppStore();
  435. const radarChart = computed(() => {
  436. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  437. return {
  438. chart: {
  439. height: 300,
  440. type: 'radar',
  441. zoom: {
  442. enabled: false,
  443. },
  444. toolbar: {
  445. show: false,
  446. },
  447. },
  448. colors: ['#4361ee'],
  449. xaxis: {
  450. categories: ['January', 'February', 'March', 'April', 'May', 'June'],
  451. },
  452. plotOptions: {
  453. radar: {
  454. polygons: {
  455. strokeColors: isDark ? '#191e3a' : '#e0e6ed',
  456. connectorColors: isDark ? '#191e3a' : '#e0e6ed',
  457. },
  458. },
  459. },
  460. tooltip: {
  461. theme: isDark ? 'dark' : 'light',
  462. },
  463. };
  464. });
  465. const radarChartSeries = ref([
  466. {
  467. name: 'Series 1',
  468. data: [80, 50, 30, 40, 100, 20],
  469. },
  470. ]);
  471. <\/script>
  472. `,-1),qe={class:"panel"},He={class:"flex items-center justify-between mb-5"},Ke=e("h5",{class:"font-semibold text-lg dark:text-white"},"Basic Pie",-1),Qe={class:"flex items-center"},Ze={class:"mb-5"},et=e("pre",null,`<!-- basic pie -->
  473. <apexchart height="300" :options="pieChart" :series="pieChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  474. <!-- script -->
  475. <script lang="ts" setup>
  476. import { ref, computed } from 'vue';
  477. import apexchart from 'vue3-apexcharts';
  478. import { useAppStore } from '@/stores/index';
  479. const store = useAppStore();
  480. const pieChart = computed(() => {
  481. return {
  482. chart: {
  483. height: 300,
  484. type: 'pie',
  485. zoom: {
  486. enabled: false,
  487. },
  488. toolbar: {
  489. show: false,
  490. },
  491. },
  492. labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
  493. colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f'],
  494. responsive: [
  495. {
  496. breakpoint: 480,
  497. options: {
  498. chart: {
  499. width: 200,
  500. },
  501. },
  502. },
  503. ],
  504. stroke: {
  505. show: false,
  506. },
  507. legend: {
  508. position: 'bottom',
  509. },
  510. };
  511. });
  512. const pieChartSeries = ref([44, 55, 13, 43, 22]);
  513. <\/script>
  514. `,-1),tt={class:"panel"},st={class:"flex items-center justify-between mb-5"},at=e("h5",{class:"font-semibold text-lg dark:text-white"},"Basic Donut",-1),rt={class:"flex items-center"},ot={class:"mb-5"},it=e("pre",null,`<!-- basic donut -->
  515. <apexchart height="300" :options="donutChart" :series="donutChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  516. <!-- script -->
  517. <script lang="ts" setup>
  518. import { ref, computed } from 'vue';
  519. import apexchart from 'vue3-apexcharts';
  520. import { useAppStore } from '@/stores/index';
  521. const store = useAppStore();
  522. const donutChart = computed(() => {
  523. return {
  524. chart: {
  525. height: 300,
  526. type: 'donut',
  527. zoom: {
  528. enabled: false,
  529. },
  530. toolbar: {
  531. show: false,
  532. },
  533. },
  534. stroke: {
  535. show: false,
  536. },
  537. labels: ['Team A', 'Team B', 'Team C'],
  538. colors: ['#4361ee', '#805dca', '#e2a03f'],
  539. responsive: [
  540. {
  541. breakpoint: 480,
  542. options: {
  543. chart: {
  544. width: 200,
  545. },
  546. },
  547. },
  548. ],
  549. legend: {
  550. position: 'bottom',
  551. },
  552. };
  553. });
  554. const donutChartSeries = ref([44, 55, 13]);
  555. <\/script>
  556. `,-1),lt={class:"panel"},nt={class:"flex items-center justify-between mb-5"},dt=e("h5",{class:"font-semibold text-lg dark:text-white"},"Basic Polar Area",-1),ct={class:"flex items-center"},ht={class:"mb-5"},pt=e("pre",null,`<!-- basic polar area -->
  557. <apexchart height="300" :options="polarAreaChart" :series="polarAreaChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  558. <!-- script -->
  559. <script lang="ts" setup>
  560. import { ref, computed } from 'vue';
  561. import apexchart from 'vue3-apexcharts';
  562. import { useAppStore } from '@/stores/index';
  563. const store = useAppStore();
  564. const polarAreaChart = computed(() => {
  565. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  566. return {
  567. chart: {
  568. height: 300,
  569. type: 'polarArea',
  570. zoom: {
  571. enabled: false,
  572. },
  573. toolbar: {
  574. show: false,
  575. },
  576. },
  577. colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f', '#2196f3', '#3b3f5c'],
  578. stroke: {
  579. show: false,
  580. },
  581. responsive: [
  582. {
  583. breakpoint: 480,
  584. options: {
  585. chart: {
  586. width: 200,
  587. },
  588. },
  589. },
  590. ],
  591. plotOptions: {
  592. polarArea: {
  593. rings: {
  594. strokeColor: isDark ? '#191e3a' : '#e0e6ed',
  595. },
  596. spokes: {
  597. connectorColors: isDark ? '#191e3a' : '#e0e6ed',
  598. },
  599. },
  600. },
  601. legend: {
  602. position: 'bottom',
  603. },
  604. fill: {
  605. opacity: 0.85,
  606. },
  607. };
  608. });
  609. const polarAreaChartSeries = ref([14, 23, 21, 17, 15, 10, 12, 17, 21]);
  610. <\/script>
  611. `,-1),mt={class:"panel"},ut={class:"flex items-center justify-between mb-5"},ft=e("h5",{class:"font-semibold text-lg dark:text-white"},"Radial Bar",-1),bt={class:"flex items-center"},gt={class:"mb-5"},kt=e("pre",null,`<!-- radial bar -->
  612. <apexchart height="300" :options="radialBarChart" :series="radialBarChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  613. <!-- script -->
  614. <script lang="ts" setup>
  615. import { ref, computed } from 'vue';
  616. import apexchart from 'vue3-apexcharts';
  617. import { useAppStore } from '@/stores/index';
  618. const store = useAppStore();
  619. const radialBarChart = computed(() => {
  620. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  621. return {
  622. chart: {
  623. height: 300,
  624. type: 'radialBar',
  625. zoom: {
  626. enabled: false,
  627. },
  628. toolbar: {
  629. show: false,
  630. },
  631. },
  632. colors: ['#4361ee', '#805dca', '#e2a03f'],
  633. grid: {
  634. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  635. },
  636. plotOptions: {
  637. radialBar: {
  638. dataLabels: {
  639. name: {
  640. fontSize: '22px',
  641. },
  642. value: {
  643. fontSize: '16px',
  644. },
  645. total: {
  646. show: true,
  647. label: 'Total',
  648. formatter: function (w) {
  649. // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
  650. return 249;
  651. },
  652. },
  653. },
  654. },
  655. },
  656. labels: ['Apples', 'Oranges', 'Bananas'],
  657. fill: {
  658. opacity: 0.85,
  659. },
  660. };
  661. });
  662. const radialBarChartSeries = ref([44, 55, 41]);
  663. <\/script>
  664. `,-1),xt={class:"panel"},vt={class:"flex items-center justify-between mb-5"},yt=e("h5",{class:"font-semibold text-lg dark:text-white"},"Bubble Chart",-1),_t={class:"flex items-center"},Ct={class:"mb-5"},wt=e("pre",null,`<!-- bubble chart -->
  665. <apexchart height="300" :options="bubbleChart" :series="bubbleChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
  666. <!-- script -->
  667. <script lang="ts" setup>
  668. import { ref, computed } from 'vue';
  669. import apexchart from 'vue3-apexcharts';
  670. import { useAppStore } from '@/stores/index';
  671. const store = useAppStore();
  672. const generateData = (baseval, count, yrange) => {
  673. var i = 0;
  674. var series: any = [];
  675. while (i < count) {
  676. var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
  677. var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
  678. var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
  679. series.push([x, y, z]);
  680. baseval += 86400000;
  681. i++;
  682. }
  683. return series;
  684. };
  685. const bubbleChart = computed(() => {
  686. const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
  687. const isRtl = store.rtlClass === 'rtl' ? true : false;
  688. return {
  689. chart: {
  690. height: 300,
  691. type: 'bubble',
  692. zoom: {
  693. enabled: false,
  694. },
  695. toolbar: {
  696. show: false,
  697. },
  698. },
  699. colors: ['#4361ee', '#00ab55'],
  700. dataLabels: {
  701. enabled: false,
  702. },
  703. xaxis: {
  704. tickAmount: 12,
  705. type: 'category',
  706. axisBorder: {
  707. color: isDark ? '#191e3a' : '#e0e6ed',
  708. },
  709. },
  710. yaxis: {
  711. max: 70,
  712. opposite: isRtl ? true : false,
  713. labels: {
  714. offsetX: isRtl ? -10 : 0,
  715. },
  716. },
  717. grid: {
  718. borderColor: isDark ? '#191e3a' : '#e0e6ed',
  719. },
  720. tooltip: {
  721. theme: isDark ? 'dark' : 'light',
  722. },
  723. stroke: {
  724. colors: isDark ? ['#191e3a'] : ['#e0e6ed'],
  725. },
  726. fill: {
  727. opacity: 0.85,
  728. },
  729. };
  730. });
  731. const bubbleChartSeries = ref([
  732. {
  733. name: 'Bubble1',
  734. data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
  735. min: 10,
  736. max: 60,
  737. }),
  738. },
  739. {
  740. name: 'Bubble2',
  741. data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
  742. min: 10,
  743. max: 60,
  744. }),
  745. },
  746. ]);
  747. <\/script>
  748. `,-1),Tt=H({__name:"charts",setup(St){K({title:"Charts"});const r=Q(),{codeArr:n,toggleCode:d}=q(),x=(a,t,i)=>{for(var v=0,y=[];v<t;){var U=Math.floor(Math.random()*750)+1,V=Math.floor(Math.random()*(i.max-i.min+1))+i.min,Y=Math.floor(Math.random()*(75-15+1))+15;y.push([U,V,Y]),v++}return y},_=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,type:"line",toolbar:!1},colors:["#4361ee"],tooltip:{marker:!1,y:{formatter(i){return"$"+i}},theme:a?"dark":"light"},stroke:{width:2,curve:"smooth"},xaxis:{categories:["Jan","Feb","Mar","Apr","May","June"],axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{opposite:!!t,labels:{offsetX:t?-20:0}},grid:{borderColor:a?"#191e3a":"#e0e6ed"}}}),C=m([{name:"Sales",data:[45,55,75,25,45,110]}]),w=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{type:"area",height:300,zoom:{enabled:!1},toolbar:{show:!1}},colors:["#805dca"],dataLabels:{enabled:!1},stroke:{width:2,curve:"smooth"},xaxis:{axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{opposite:!!t,labels:{offsetX:t?-40:0}},labels:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],legend:{horizontalAlign:"left"},grid:{borderColor:a?"#191e3a":"#e0e6ed"},tooltip:{theme:a?"dark":"light"}}}),S=m([{name:"Income",data:[16800,16800,15500,17800,15500,17e3,19e3,16e3,15e3,17e3,14e3,17e3]}]),D=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,type:"bar",zoom:{enabled:!1},toolbar:{show:!1}},colors:["#805dca","#e7515a"],dataLabels:{enabled:!1},stroke:{show:!0,width:2,colors:["transparent"]},plotOptions:{bar:{horizontal:!1,columnWidth:"55%",endingShape:"rounded"}},grid:{borderColor:a?"#191e3a":"#e0e6ed"},xaxis:{categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{opposite:!!t,labels:{offsetX:t?-10:0}},tooltip:{theme:a?"dark":"light",y:{formatter:function(i){return i}}}}}),M=m([{name:"Net Profit",data:[44,55,57,56,61,58,63,60,66]},{name:"Revenue",data:[76,85,101,98,87,105,91,114,94]}]),A=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,type:"bar",stacked:!0,zoom:{enabled:!1},toolbar:{show:!1}},colors:["#2196f3","#3b3f5c"],responsive:[{breakpoint:480,options:{legend:{position:"bottom",offsetX:-10,offsetY:5}}}],plotOptions:{bar:{horizontal:!1}},xaxis:{type:"datetime",categories:["01/01/2011 GMT","01/02/2011 GMT","01/03/2011 GMT","01/04/2011 GMT","01/05/2011 GMT","01/06/2011 GMT"],axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{opposite:!!t,labels:{offsetX:t?-20:0}},grid:{borderColor:a?"#191e3a":"#e0e6ed"},legend:{position:"right",offsetY:40},tooltip:{theme:a?"dark":"light"},fill:{opacity:.8}}}),T=m([{name:"PRODUCT A",data:[44,55,41,67,22,43]},{name:"PRODUCT B",data:[13,23,20,8,13,27]}]),B=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,type:"bar",zoom:{enabled:!1},toolbar:{show:!1}},dataLabels:{enabled:!1},stroke:{show:!0,width:1},colors:["#4361ee"],xaxis:{categories:["Sun","Mon","Tue","Wed","Thur","Fri","Sat"],axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{opposite:!!t,reversed:!!t},grid:{borderColor:a?"#191e3a":"#e0e6ed"},plotOptions:{bar:{horizontal:!0}},fill:{opacity:.8}}}),z=m([{name:"Sales",data:[44,55,41,67,22,43,21,70]}]),R=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,zoom:{enabled:!1},toolbar:{show:!1}},colors:["#2196f3","#00ab55","#4361ee"],stroke:{width:[0,2,2],curve:"smooth"},plotOptions:{bar:{columnWidth:"50%"}},fill:{opacity:[1,.25,1]},labels:["01/01/2022","02/01/2022","03/01/2022","04/01/2022","05/01/2022","06/01/2022","07/01/2022","08/01/2022","09/01/2022","10/01/2022","11/01/2022"],markers:{size:0},xaxis:{type:"datetime",axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{title:{text:"Points"},min:0,opposite:!!t,labels:{offsetX:t?-10:0}},grid:{borderColor:a?"#191e3a":"#e0e6ed"},tooltip:{shared:!0,intersect:!1,theme:a?"dark":"light",y:{formatter:i=>typeof i<"u"?i.toFixed(0)+" points":i}},legend:{itemMargin:{horizontal:4,vertical:8}}}}),j=m([{name:"TEAM A",type:"column",data:[23,11,22,27,13,22,37,21,44,22,30]},{name:"TEAM B",type:"area",data:[44,55,41,67,22,43,21,41,56,27,43]},{name:"TEAM C",type:"line",data:[30,25,36,30,45,35,64,52,59,36,39]}]),O=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode);return{chart:{height:300,type:"radar",zoom:{enabled:!1},toolbar:{show:!1}},colors:["#4361ee"],xaxis:{categories:["January","February","March","April","May","June"]},plotOptions:{radar:{polygons:{strokeColors:a?"#191e3a":"#e0e6ed",connectorColors:a?"#191e3a":"#e0e6ed"}}},tooltip:{theme:a?"dark":"light"}}}),J=m([{name:"Series 1",data:[80,50,30,40,100,20]}]),F=p(()=>({chart:{height:300,type:"pie",zoom:{enabled:!1},toolbar:{show:!1}},labels:["Team A","Team B","Team C","Team D","Team E"],colors:["#4361ee","#805dca","#00ab55","#e7515a","#e2a03f"],responsive:[{breakpoint:480,options:{chart:{width:200}}}],stroke:{show:!1},legend:{position:"bottom"}})),G=m([44,55,13,43,22]),$=p(()=>({chart:{height:300,type:"donut",zoom:{enabled:!1},toolbar:{show:!1}},stroke:{show:!1},labels:["Team A","Team B","Team C"],colors:["#4361ee","#805dca","#e2a03f"],responsive:[{breakpoint:480,options:{chart:{width:200}}}],legend:{position:"bottom"}})),X=m([44,55,13]),L=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode);return{chart:{height:300,type:"polarArea",zoom:{enabled:!1},toolbar:{show:!1}},colors:["#4361ee","#805dca","#00ab55","#e7515a","#e2a03f","#2196f3","#3b3f5c"],stroke:{show:!1},responsive:[{breakpoint:480,options:{chart:{width:200}}}],plotOptions:{polarArea:{rings:{strokeColor:a?"#191e3a":"#e0e6ed"},spokes:{connectorColors:a?"#191e3a":"#e0e6ed"}}},legend:{position:"bottom"},fill:{opacity:.85}}}),P=m([14,23,21,17,15,10,12,17,21]),E=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode);return{chart:{height:300,type:"radialBar",zoom:{enabled:!1},toolbar:{show:!1}},colors:["#4361ee","#805dca","#e2a03f"],grid:{borderColor:a?"#191e3a":"#e0e6ed"},plotOptions:{radialBar:{dataLabels:{name:{fontSize:"22px"},value:{fontSize:"16px"},total:{show:!0,label:"Total",formatter:function(t){return 249}}}}},labels:["Apples","Oranges","Bananas"],fill:{opacity:.85}}}),N=m([44,55,41]),W=p(()=>{const a=!!(r.theme==="dark"||r.isDarkMode),t=r.rtlClass==="rtl";return{chart:{height:300,type:"bubble",zoom:{enabled:!1},toolbar:{show:!1}},colors:["#4361ee","#00ab55"],dataLabels:{enabled:!1},xaxis:{tickAmount:12,type:"category",axisBorder:{color:a?"#191e3a":"#e0e6ed"}},yaxis:{max:70,opposite:!!t,labels:{offsetX:t?-10:0}},grid:{borderColor:a?"#191e3a":"#e0e6ed"},tooltip:{theme:a?"dark":"light"},stroke:{colors:a?["#191e3a"]:["#e0e6ed"]},fill:{opacity:.85}}}),I=m([{name:"Bubble1",data:x(new Date("11 Feb 2017 GMT").getTime(),20,{min:10,max:60})},{name:"Bubble2",data:x(new Date("11 Feb 2017 GMT").getTime(),20,{min:10,max:60})}]);return(a,t)=>(l(),Z("div",null,[te,e("div",se,[e("div",ae,[e("div",re,[o(ee)]),oe,ie]),e("div",le,[e("div",ne,[de,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[0]||(t[0]=i=>s(d)("code1"))},[e("span",ce,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",he,[o(s(k),{height:"300",options:s(_),series:C.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code1")?(l(),f(c,{key:0},{default:b(()=>[pe]),_:1})):g("",!0)]),e("div",me,[e("div",ue,[fe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[1]||(t[1]=i=>s(d)("code2"))},[e("span",be,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",ge,[o(s(k),{height:"300",options:s(w),series:S.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code2")?(l(),f(c,{key:0},{default:b(()=>[ke]),_:1})):g("",!0)]),e("div",xe,[e("div",ve,[ye,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[2]||(t[2]=i=>s(d)("code3"))},[e("span",_e,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Ce,[o(s(k),{height:"300",options:s(D),series:M.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code3")?(l(),f(c,{key:0},{default:b(()=>[we]),_:1})):g("",!0)]),e("div",Se,[e("div",De,[Me,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[3]||(t[3]=i=>s(d)("code4"))},[e("span",Ae,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Te,[o(s(k),{height:"300",options:s(A),series:T.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code4")?(l(),f(c,{key:0},{default:b(()=>[Be]),_:1})):g("",!0)]),e("div",ze,[e("div",Re,[je,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[4]||(t[4]=i=>s(d)("code5"))},[e("span",Oe,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Je,[o(s(k),{height:"300",options:s(B),series:z.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code5")?(l(),f(c,{key:0},{default:b(()=>[Fe]),_:1})):g("",!0)]),e("div",Ge,[e("div",$e,[Xe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[5]||(t[5]=i=>s(d)("code6"))},[e("span",Le,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Pe,[o(s(k),{height:"300",options:s(R),series:j.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code6")?(l(),f(c,{key:0},{default:b(()=>[Ee]),_:1})):g("",!0)]),e("div",Ne,[e("div",We,[Ie,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[6]||(t[6]=i=>s(d)("code7"))},[e("span",Ue,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Ve,[o(s(k),{height:"300",options:s(O),series:J.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code7")?(l(),f(c,{key:0},{default:b(()=>[Ye]),_:1})):g("",!0)]),e("div",qe,[e("div",He,[Ke,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[7]||(t[7]=i=>s(d)("code8"))},[e("span",Qe,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Ze,[o(s(k),{height:"300",options:s(F),series:G.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code8")?(l(),f(c,{key:0},{default:b(()=>[et]),_:1})):g("",!0)]),e("div",tt,[e("div",st,[at,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[8]||(t[8]=i=>s(d)("code9"))},[e("span",rt,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",ot,[o(s(k),{height:"300",options:s($),series:X.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code9")?(l(),f(c,{key:0},{default:b(()=>[it]),_:1})):g("",!0)]),e("div",lt,[e("div",nt,[dt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[9]||(t[9]=i=>s(d)("code10"))},[e("span",ct,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",ht,[o(s(k),{height:"300",options:s(L),series:P.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code10")?(l(),f(c,{key:0},{default:b(()=>[pt]),_:1})):g("",!0)]),e("div",mt,[e("div",ut,[ft,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[10]||(t[10]=i=>s(d)("code11"))},[e("span",bt,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",gt,[o(s(k),{height:"300",options:s(E),series:N.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code11")?(l(),f(c,{key:0},{default:b(()=>[kt]),_:1})):g("",!0)]),e("div",xt,[e("div",vt,[yt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[11]||(t[11]=i=>s(d)("code12"))},[e("span",_t,[o(h,{class:"me-2"}),u(" Code ")])])]),e("div",Ct,[o(s(k),{height:"300",options:s(W),series:I.value,class:"bg-white dark:bg-black rounded-lg overflow-hidden"},null,8,["options","series"])]),s(n).includes("code12")?(l(),f(c,{key:0},{default:b(()=>[wt]),_:1})):g("",!0)])])]))}});export{Tt as default};