sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: replace charts with charts built on coreui-vue-chartjs library

Browse Source
This commit is contained in:
woothu
2019-04-15 15:09:35 +02:00
parent d938bd4b9b
commit 4663251573
29 changed files with 788 additions and 814 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/widgets/Widgets.vue
+17 -26
View File
@@ -264,70 +264,58 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSimple_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/>
<CChartLineSimple style="height:40px" borderColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/>
<CChartLineSimple style="height:40px" borderColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
borderColor="success"
/>
<CChartLineSimple style="height:40px" borderColor="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidgetSimple_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidgetSimple_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='primary'/>
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='success'/>
<CChartBarSimple style="height:40px" backgroundColor="success"/>
</CWidgetSimple>
</CCol>
</CRow>
@@ -337,10 +325,13 @@
<script>
import WidgetsSocial from './WidgetsSocial'
import WidgetsDropdown from './WidgetsDropdown'
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default {
name: 'Widgets',
components: {
CChartLineSimple,
CChartBarSimple,
WidgetsSocial,
WidgetsDropdown
}
src/views/widgets/WidgetsDropdown.vue
+32 -31
View File
@@ -15,13 +15,14 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimplePointedChart
<CChartLineSimple
pointed
class="px-3"
:data="[65, 59, 84, 84, 51, 55, 40]"
:labels="months"
style="height:70px"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
backgroundColor="primary"
label="Members"
pointHoverColor="primary"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -41,14 +42,15 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimplePointedChart
<CChartLineSimple
pointed
class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]"
:labels="months"
style="height:70px"
label="Members"
:dataPoints="[1, 18, 9, 17, 34, 22, 11]"
backgroundColor="info"
:options="{ elements: { line: { tension: 0.00001 }}}"
pointHoverColor="info"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -72,17 +74,15 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimpleLineChart
chartId="CWidgetDropdown_3"
:data="[78, 81, 80, 45, 34, 12, 40]"
:labels="months"
style="height:70px"
color="rgba(255,255,255,.2)"
label="Members"
:options="{elements: {line: {borderWidth: 2.5}}}"
pointHoverColor="warning"
/>
<CChartLineSimple
style="height:70px"
backgroundColor="rgba(255,255,255,.2)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
:options="{ elements: { line: { borderWidth: 2.5 }}}"
pointHoverBackgroundColor="warning"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
@@ -105,13 +105,11 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimpleBarChart
chartId="CWidgetDropdown_4"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Members"
color="rgb(250, 152, 152)"
<CChartBarSimple
style="height:70px"
backgroundColor="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -119,12 +117,15 @@
</template>
<script>
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default {
name: 'WidgetsDropdown',
data () {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
}
}
// data () {
// return {
// months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
// }
// },
components: { CChartLineSimple, CChartBarSimple }
}
</script>
src/views/widgets/WidgetsSocial.vue
+26 -26
View File
@@ -1,6 +1,6 @@
<template functional>
<template>
<CRow>
<template v-if="!props.noCharts">
<template v-if="!noCharts">
<CCol md="3" sm="6">
<CWidgetSocial
variant="facebook"
@@ -9,13 +9,12 @@
leftHeader="459"
leftFooter="feeds"
>
<CSimpleLineChart
chartId="facebook"
:data="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -27,13 +26,12 @@
leftHeader="1.792"
leftFooter="tweets"
>
<CSimpleLineChart
chartId="twitter"
:data="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -45,13 +43,12 @@
leftHeader="292"
leftFooter="feeds"
>
<CSimpleLineChart
chartId="linkedIn"
:data="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -63,13 +60,12 @@
leftHeader="92"
leftFooter="circles"
>
<CSimpleLineChart
chartId="google-plus"
:data="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -117,8 +113,12 @@
</template>
<script>
import { CChartLineSimple } from '../charts/index.js'
export default {
name: 'WidgetsSocial',
components: {
CChartLineSimple
},
props: {
noCharts: Boolean
}