Skip to content

[DO NOT MERGE] POC/CHARTS #8294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: epic/FOUR-22605
Choose a base branch
from
+333 −27
Open

[DO NOT MERGE] POC/CHARTS #8294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
"@processmaker/vue-form-elements": "0.65.0",
"@processmaker/vue-multiselect": "2.3.0",
"@tinymce/tinymce-vue": "2.0.0",
"apexcharts": "^4.7.0",
"axios": "^0.27.2",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.18.1",
Expand Down Expand Up @@ -103,6 +104,7 @@
"tooltip.js": "^1.3.3",
"v-tooltip": "^2.0.3",
"vue": "^2.7.16",
"vue-apexcharts": "^1.7.0",
"vue-chartjs": "^3.5.0",
"vue-color": "^2.7.1",
"vue-cookies": "^1.8.2",
Expand Down
292 changes: 292 additions & 0 deletions resources/js/processes-catalogue/components/home/Apexchart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
export const dataA = {
series: [
{
data: [
21, 22, 10, 28, 16, 21, 13, 30, 21, 22, 10, 28, 16, 21, 13,
30,
],
},
],
chartOptions: {
chart: {
height: 350,
type: "bar",
events: {
click: function (chart, w, e) {
// console.log(chart, w, e)
},
},
},
colors: [
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#00E396",
"#FEB019",
"#FF4560",
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#00E396",
"#FEB019",
"#FF4560",
],
plotOptions: {
bar: {
columnWidth: "80%",
distributed: true,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
xaxis: {
categories: [
["John", "Doe"],
["Joe", "Smith"],
["Jake", "Williams"],
"Amber",
["Peter", "Brown"],
["Mary", "Evans"],
["David", "Wilson"],
["Lily", "Roberts"],
["John", "Doe"],
["Joe", "Smith"],
["Jake", "Williams"],
"Amber",
["Peter", "Brown"],
["Mary", "Evans"],
["David", "Wilson"],
["Lily", "Roberts"],
],
labels: {
style: {
colors: [
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#00E396",
"#FEB019",
"#FF4560",
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#00E396",
"#FEB019",
"#FF4560",
],
fontSize: "12px",
},
},
},
},
};

export const dataB = {
series: [
{
name: "Actual",
data: [
{
x: "2011",
y: 12,
goals: [
{
name: "Expected",
value: 14,
strokeWidth: 2,
strokeDashArray: 2,
strokeColor: "#775DD0",
},
],
},
{
x: "2012",
y: 44,
goals: [
{
name: "Expected",
value: 54,
strokeWidth: 5,
strokeHeight: 10,
strokeColor: "#775DD0",
},
],
},
{
x: "2013",
y: 54,
goals: [
{
name: "Expected",
value: 52,
strokeWidth: 10,
strokeHeight: 0,
strokeLineCap: "round",
strokeColor: "#775DD0",
},
],
},
{
x: "2014",
y: 66,
goals: [
{
name: "Expected",
value: 61,
strokeWidth: 10,
strokeHeight: 0,
strokeLineCap: "round",
strokeColor: "#775DD0",
},
],
},
{
x: "2015",
y: 81,
goals: [
{
name: "Expected",
value: 66,
strokeWidth: 10,
strokeHeight: 0,
strokeLineCap: "round",
strokeColor: "#775DD0",
},
],
},
{
x: "2016",
y: 67,
goals: [
{
name: "Expected",
value: 70,
strokeWidth: 5,
strokeHeight: 10,
strokeColor: "#775DD0",
},
],
},
],
},
],
chartOptions: {
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
horizontal: true,
},
},
colors: ["#00E396"],
dataLabels: {
formatter: function (val, opt) {
const goals =
opt.w.config.series[opt.seriesIndex].data[
opt.dataPointIndex
].goals;

if (goals && goals.length) {
return `${val} / ${goals[0].value}`;
}
return val;
},
},
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ["Actual", "Expected"],
markers: {
fillColors: ["#00E396", "#775DD0"],
},
},
},
};

function generateData(baseval, count, yrange) {
let i = 0;
const series = [];
while (i < count) {
const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;

series.push({
x,
y,
z
});
i++;
}
return series;
}


export const dataC = {
series: [
{
name: "Bubble1",
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Bubble2",
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Bubble3",
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Bubble4",
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
],
chartOptions: {
chart: {
height: 350,
type: "bubble",
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 0.8,
},
title: {
text: "Simple Bubble Chart",
},
xaxis: {
tickAmount: 12,
type: "category",
},
yaxis: {
max: 70,
},
},
};
61 changes: 34 additions & 27 deletions resources/js/processes-catalogue/components/home/CustomHomeScreen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
<template>
<div class="tw-flex tw-flex-col tw-space-y-4 tw-h-full tw-w-full">
<component
:is="view"
:process="process"
@goBackCategory="emit('goBackCategory')" />
<div class="tw-flex tw-flex-col tw-space-y-4 tw-h-full tw-w-full tw-py-4">
<div class="tw-grid tw-grid-cols-1 tw-gap-4">
<div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
<apexchart type="bar" height="350" :options="dataA.chartOptions" :series="dataA.series"></apexchart>
</div>
</div>
<div class="tw-grid tw-grid-cols-4">
<div class="tw-bg-white tw-col-span-3 tw-p-4 tw-rounded-lg tw-shadow">
<BaseCardButtonGroup v-if="data.length > 0" :key="dataKey + 'button'" :data="data"/>
</div>
</div>

<div class="tw-grid tw-grid-cols-2">
<div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
<apexchart type="bar" height="300" :options="dataB.chartOptions" :series="dataB.series"></apexchart>
</div>

<div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
<apexchart type="bubble" height="300" :options="dataC.chartOptions" :series="dataC.series"></apexchart>
</div>
</div>
</div>
</template>

<script setup>
import { computed } from "vue";
import TceDistributionStudent from "./TceDistributionStudent.vue";
import TceDistributionCollege from "./TceDistributionCollege.vue";
import TceDistributionGrants from "./TceDistributionGrants.vue";
import { ref, onMounted } from "vue";
import { dataA, dataB, dataC } from "./Apexchart";
import { getMetrics } from "../api";
import { buildMetrics } from "./config/metrics";
import BaseCardButtonGroup from "./ButtonGroup/BaseCardButtonGroup.vue";

const props = defineProps({
process: {
Expand All @@ -20,24 +37,14 @@ const props = defineProps({
},
});

const emit = defineEmits(["goBackCategory"]);

const view = computed(() => {
let screenId = 0;
const unparseProperties = props.process?.launchpad?.properties || null;
if (unparseProperties !== null) {
screenId = JSON.parse(unparseProperties)?.screen_id || 0;
}
const data = ref([]);
const dataKey = ref(0);

switch (screenId) {
case "tce-student":
return TceDistributionStudent;
case "tce-college":
return TceDistributionCollege;
case "tce-grants":
return TceDistributionGrants;
default:
return TceDistributionStudent;
}
const hookMetrics = async () => {
const metricsResponse = await getMetrics({ processId: props.process.id });
data.value = buildMetrics(metricsResponse.data);
};
onMounted(() => {
hookMetrics();
});
</script>
5 changes: 5 additions & 0 deletions resources/js/processes-catalogue/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import Vue from "vue";
import Process from "./components/Process";
import ProcessesCatalogue from "./components/ProcessesCatalogue";
import ProcessListing from "./components/ProcessListing";
import VueApexCharts from 'vue-apexcharts';

Vue.use(VueApexCharts);

Vue.component('apexchart', VueApexCharts);

export const EventBus = new Vue();
Vue.use(VueRouter);
Expand Down