diff options
Diffstat (limited to 'examples/charts/qmlchartsgallery/qml/customlegend')
6 files changed, 426 insertions, 0 deletions
diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/AnimatedAreaSeries.qml b/examples/charts/qmlchartsgallery/qml/customlegend/AnimatedAreaSeries.qml new file mode 100644 index 00000000..1b768878 --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/AnimatedAreaSeries.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtCharts + +AreaSeries { + id: series + + Behavior on opacity { + NumberAnimation { duration: 250 } + } +} diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewHighlighted.qml b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewHighlighted.qml new file mode 100644 index 00000000..f29c944c --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewHighlighted.qml @@ -0,0 +1,62 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtCharts + +//![1] +ChartView { + id: chartViewHighlighted + + property variant selectedSeries + + signal clicked + + legend.visible: false + margins.top: 10 + margins.bottom: 0 + antialiasing: true + + LineSeries { + id: lineSeries + + axisX: ValueAxis { + min: 2006 + max: 2012 + labelFormat: "%.0f" + tickCount: 7 + } + axisY: ValueAxis { + id: axisY + titleText: "EUR" + min: 0 + max: 40000 + labelFormat: "%.0f" + tickCount: 5 + } + } +//![1] + + MouseArea { + anchors.fill: parent + onClicked: { + chartViewHighlighted.clicked(); + } + } + + onSelectedSeriesChanged: { + lineSeries.clear(); + lineSeries.color = selectedSeries.color; + var maxVal = 0.0; + for (var i = 0; i < selectedSeries.upperSeries.count; i++) { + var y = selectedSeries.upperSeries.at(i).y - selectedSeries.lowerSeries.at(i).y; + lineSeries.append(selectedSeries.upperSeries.at(i).x, y); + if (maxVal < y) + maxVal = y; + } + chartViewHighlighted.title = selectedSeries.name; + axisY.max = maxVal; + axisY.applyNiceNumbers() + } +} + diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewSelector.qml b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewSelector.qml new file mode 100644 index 00000000..c623af8c --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewSelector.qml @@ -0,0 +1,82 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtCharts + +Item { + id: chartViewSelector + + signal seriesAdded(string seriesName, color seriesColor) + + function highlightSeries(seriesName) { + if (seriesName === "") { + if (state !== "") + state = ""; + + for (var i = 0; i < chartViewStacked.count; i++) + chartViewStacked.series(i).opacity = 1.0; + } else { + var targetOpacity = 0.1; + for (var j = 0; j < chartViewStacked.count; j++) { + if (chartViewStacked.series(j).name !== seriesName) + chartViewStacked.series(j).opacity = 0.25; + else if (state === "highlight") + chartViewSelected.selectedSeries = chartViewStacked.series(j); + } + } + } + + function selectSeries(seriesName) { + for (var i = 0; i < chartViewStacked.count; i++) { + if (chartViewStacked.series(i).name === seriesName) { + chartViewSelected.selectedSeries = chartViewStacked.series(i); + if (chartViewSelector.state === "") + chartViewSelector.state = "highlighted"; + else + chartViewSelector.state = ""; + } + } + } + + ChartViewStacked { + id: chartViewStacked + anchors.left: parent.left + anchors.leftMargin: 0 + width: parent.width + height: parent.height + onSeriesAdded: series => chartViewSelector.seriesAdded(series.name, series.color); + } + + ChartViewHighlighted { + id: chartViewSelected + anchors.left: chartViewStacked.right + width: parent.width + height: parent.height + + opacity: 0.0 + onClicked: { + chartViewSelector.state = ""; + } + } + + states: State { + name: "highlighted" + PropertyChanges { + target: chartViewSelected + opacity: 1.0 + } + PropertyChanges { + target: chartViewStacked + anchors.leftMargin: -chartViewStacked.width + opacity: 0.0 + } + } + + transitions: Transition { + PropertyAnimation { + properties: "width, height, opacity, anchors.leftMargin" + duration: 400 + } + } +} diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewStacked.qml b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewStacked.qml new file mode 100644 index 00000000..063ceef6 --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/ChartViewStacked.qml @@ -0,0 +1,102 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtCharts + +ChartView { + id: chartView + + signal entered(string seriesName) + signal exited(string seriesName) + + title: "Government Taxes" + legend.visible: false + margins.top: 10 + margins.bottom: 0 + antialiasing: true + + ValueAxis { + id: axisX + min: 2006 + max: 2012 + tickCount: 7 + labelFormat: "%.0f" + } + + ValueAxis { + id: axisY + titleText: "EUR" + min: 0 + max: 90000 + tickCount: 10 + labelFormat: "%.0f" + } + + AnimatedAreaSeries { + id: stateSeries + name: "state" + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: stateUpper + XYPoint { x: 2006; y: 33119 } + XYPoint { x: 2007; y: 37941 } + XYPoint { x: 2008; y: 40122 } + XYPoint { x: 2009; y: 38991 } + XYPoint { x: 2010; y: 34055 } + XYPoint { x: 2011; y: 34555 } + XYPoint { x: 2012; y: 38991 } + } + lowerSeries: LineSeries { + XYPoint { x: 2006; y: 0 } + XYPoint { x: 2007; y: 0 } + XYPoint { x: 2008; y: 0 } + XYPoint { x: 2009; y: 0 } + XYPoint { x: 2010; y: 0 } + XYPoint { x: 2011; y: 0 } + XYPoint { x: 2012; y: 0 } + } + } + + //![1] + AnimatedAreaSeries { + id: municipalSeries + name: "municipal" + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: municipalUpper + XYPoint { x: 2006; y: 33119 + 13443 } + XYPoint { x: 2007; y: 37941 + 15311 } + XYPoint { x: 2008; y: 40122 + 16552 } + XYPoint { x: 2009; y: 38991 + 17904 } + XYPoint { x: 2010; y: 34055 + 17599 } + XYPoint { x: 2011; y: 34555 + 19002 } + XYPoint { x: 2012; y: 38991 + 19177 } + } + lowerSeries: stateUpper + } + //![1] + + AnimatedAreaSeries { + id: socialSeries + name: "social sec." + axisX: axisX + axisY: axisY + borderWidth: 0 + upperSeries: LineSeries { + id: socialUpper + XYPoint { x: 2006; y: 33119 + 13443 + 18855 } + XYPoint { x: 2007; y: 37941 + 15311 + 20238 } + XYPoint { x: 2008; y: 40122 + 16552 + 21347 } + XYPoint { x: 2009; y: 38991 + 17904 + 22376 } + XYPoint { x: 2010; y: 34055 + 17599 + 22076 } + XYPoint { x: 2011; y: 34555 + 19002 + 22631 } + XYPoint { x: 2012; y: 38991 + 19177 + 23686 } + } + lowerSeries: municipalUpper + } +} diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/CustomLegend.qml b/examples/charts/qmlchartsgallery/qml/customlegend/CustomLegend.qml new file mode 100644 index 00000000..229fb834 --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/CustomLegend.qml @@ -0,0 +1,121 @@ +// Copyright (C) 20236 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +pragma ComponentBehavior: Bound +import QtQuick + +Rectangle { + id: legend + color: "lightgray" + + property int seriesCount: 0 + property variant seriesNames: [] + property variant seriesColors: [] + + signal entered(string seriesName) + signal exited(string seriesName) + signal selected(string seriesName) + + function addSeries(seriesName, color) { + var names = seriesNames; + names[seriesCount] = seriesName; + seriesNames = names; + + var colors = seriesColors; + colors[seriesCount] = color; + seriesColors = colors; + + seriesCount++; + } + + Gradient { + id: buttonGradient + GradientStop { position: 0.0; color: "#F0F0F0" } + GradientStop { position: 1.0; color: "#A0A0A0" } + } + + Gradient { + id: buttonGradientHovered + GradientStop { position: 0.0; color: "#FFFFFF" } + GradientStop { position: 1.0; color: "#B0B0B0" } + } + + //![2] + Component { + id: legendDelegate + Rectangle { + id: rect + //![2] + property string name: legend.seriesNames[DelegateModel.itemsIndex] + property color markerColor: legend.seriesColors[DelegateModel.itemsIndex] + + gradient: buttonGradient + border.color: "#A0A0A0" + border.width: 1 + radius: 4 + + implicitWidth: label.implicitWidth + marker.implicitWidth + 30 + implicitHeight: label.implicitHeight + marker.implicitHeight + 10 + + Row { + id: row + spacing: 5 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 5 + Rectangle { + id: marker + anchors.verticalCenter: parent.verticalCenter + color: rect.markerColor + opacity: 0.3 + radius: 4 + width: 12 + height: 10 + } + Text { + id: label + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -1 + text: rect.name + } + } + + //![3] + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + rect.gradient = buttonGradientHovered; + legend.entered(label.text); + } + onExited: { + rect.gradient = buttonGradient; + legend.exited(label.text); + marker.opacity = 0.3; + marker.height = 10; + } + onClicked: { + legend.selected(label.text); + marker.opacity = 1.0; + marker.height = 12; + } + } + //![3] + } + } + + //![1] + Row { + id: legendRow + anchors.centerIn: parent + spacing: 10 + + Repeater { + id: legendRepeater + model: legend.seriesCount + delegate: legendDelegate + } + } + //![1] +} diff --git a/examples/charts/qmlchartsgallery/qml/customlegend/Main.qml b/examples/charts/qmlchartsgallery/qml/customlegend/Main.qml new file mode 100644 index 00000000..354e3362 --- /dev/null +++ b/examples/charts/qmlchartsgallery/qml/customlegend/Main.qml @@ -0,0 +1,46 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick + +Item { + id: main + + Column { + id: column + anchors.fill: parent + anchors.bottomMargin: 10 + spacing: 0 + + ChartViewSelector { + id: chartViewSelector + width: parent.width + height: parent.height - customLegend.height - anchors.bottomMargin + onSeriesAdded: (seriesName, seriesColor) => customLegend.addSeries(seriesName, seriesColor); + } + + CustomLegend { + id: customLegend + width: parent.width + height: 50 + anchors.horizontalCenter: parent.horizontalCenter + onEntered: seriesName => chartViewSelector.highlightSeries(seriesName); + onExited: chartViewSelector.highlightSeries(""); + onSelected: seriesName => chartViewSelector.selectSeries(seriesName); + } + } + + states: State { + name: "highlighted" + PropertyChanges { + target: chartViewHighlighted + width: column.width + height: (column.height - column.anchors.margins * 2 - customLegend.height) + } + PropertyChanges { + target: chartViewStacked + width: 1 + height: 1 + } + } +} |