kquickcharts/controls/LineChartControl.qml

0001 /*
0002  * This file is part of KQuickCharts
0003  * SPDX-FileCopyrightText: 2019 Arjen Hiemstra <ahiemstra@heimr.nl>
0004  *
0005  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0006  */
0007
0008 import QtQuick
0009 import QtQuick.Controls
0010
0011 import org.kde.quickcharts as Charts
0012 import org.kde.quickcharts.controls
0013
0014 /**
0015  * A line chart with legend, grid and axis labels.
0016  */
0017 Control {
0018
0019     property alias valueSources: lineChart.valueSources
0020     property alias names: nameSource.array
0021     property alias color: colorSource.baseColor
0022
0023     property alias lineWidth: lineChart.lineWidth
0024     property alias fillOpacity: lineChart.fillOpacity
0025     property alias stacked: lineChart.stacked
0026
0027     property alias chart: lineChart
0028     property alias legend: legend
0029     property alias xLabels: xAxisLabels
0030     property alias yLabels: yAxisLabels
0031
0032     property alias verticalLinesVisible: verticalLines.visible
0033     property alias horizontalLinesVisible: horizontalLines.visible
0034
0035     property alias xRange: lineChart.xRange
0036     property alias yRange: lineChart.yRange
0037
0038     property alias xAxisSource: xAxisLabels.source
0039     property alias yAxisSource: yAxisLabels.source
0040
0041     property alias pointDelegate: lineChart.pointDelegate
0042
0043     background: Rectangle { color: Theme.backgroundColor }
0044
0045     contentItem: Item {
0046         anchors.fill: parent;
0047
0048         GridLines {
0049             id: horizontalLines
0050
0051             anchors.fill: lineChart
0052
0053             chart: lineChart
0054
0055             major.frequency: 2
0056             major.lineWidth: 2
0057             major.color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
0058
0059             minor.frequency: 1
0060             minor.lineWidth: 1
0061             minor.color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
0062         }
0063
0064         GridLines {
0065             id: verticalLines
0066
0067             anchors.fill: lineChart
0068
0069             chart: lineChart
0070
0071             direction: GridLines.Vertical;
0072
0073             major.count: 1
0074             major.lineWidth: 2
0075             major.color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
0076
0077             minor.count: 3
0078             minor.lineWidth: 1
0079             minor.color: Qt.rgba(0.8, 0.8, 0.8, 1.0)
0080         }
0081
0082         AxisLabels {
0083             id: yAxisLabels
0084
0085             anchors {
0086                 left: parent.left
0087                 top: parent.top
0088                 bottom: xAxisLabels.top
0089             }
0090
0091             direction: AxisLabels.VerticalBottomTop
0092             delegate: Label { text: AxisLabels.label }
0093             source: Charts.ChartAxisSource { chart: lineChart; axis: Charts.ChartAxisSource.YAxis; itemCount: 5 }
0094         }
0095
0096         AxisLabels {
0097             id: xAxisLabels
0098
0099             anchors {
0100                 left: yAxisLabels.visible ? yAxisLabels.right : parent.left
0101                 right: parent.right
0102                 bottom: legend.top
0103             }
0104
0105             delegate: Label { text: AxisLabels.label }
0106             source: Charts.ChartAxisSource { chart: lineChart; axis: Charts.ChartAxisSource.XAxis; itemCount: 5 }
0107         }
0108
0109         Legend {
0110             id: legend
0111
0112             anchors {
0113                 left: yAxisLabels.visible ? yAxisLabels.right : parent.left
0114                 right: parent.right
0115                 bottom: parent.bottom
0116                 bottomMargin: Theme.smallSpacing
0117             }
0118
0119             chart: lineChart
0120         }
0121
0122         Charts.LineChart {
0123             id: lineChart
0124             anchors {
0125                 top: parent.top
0126                 left: yAxisLabels.visible ? yAxisLabels.right : parent.left
0127                 right: parent.right
0128                 bottom: xAxisLabels.visible ? xAxisLabels.top : legend.top
0129             }
0130
0131             xRange.automatic: true
0132             yRange.automatic: true
0133
0134             colorSource: Charts.ColorGradientSource { id: colorSource; baseColor: Theme.highlightColor; itemCount: lineChart.valueSources.length }
0135             nameSource: Charts.ArraySource { id: nameSource; array: ["1", "2", "3", "4", "5"] }
0136         }
0137     }
0138 }