// Copyright (C) 2025 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause pragma ComponentBehavior: Bound import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import QtQml.Models import QtGraphs import qtgraphscsv Window { id: mainWindow width: 1200 height: 720 visible: true title: qsTr("QtGraphs with CSV Demo") Binding { target: Units property: "window" value: mainWindow } property var seriesBaseColors: ["#99A500", "#361EAB", "#1F9B5D", "#BC7A19", "#B00F36", "#5A1FAA", "#077947", "#4B523C"] property var allSeriesColors: ["#99A500", "#361EAB", "#1F9B5D", "#BC7A19", "#B00F36", "#5A1FAA", "#077947", "#4B523C"] property var activeTheme: themes.lightTheme Item { id: themes property alias lightTheme: lightTheme property alias graphsLightTheme: lightTheme.graphsTheme property alias darkTheme: darkTheme property alias graphsDarkTheme: darkTheme.graphsTheme Item { id: lightTheme property color primaryTextColor: "#2D2D2D" property color secondaryTextColor: "#595959" property color backgroundColor: "#FCFCFC" property color selectionColor: "#E3E3E3" property color borderColor: "#CDCDCD" property color legendLabelTextColor: "#FCFCFC" property alias graphsTheme: graphsLightTheme GraphsTheme { id: graphsLightTheme backgroundColor: "transparent" colorScheme: GraphsTheme.ColorScheme.Light labelTextColor: lightTheme.primaryTextColor } } Item { id: darkTheme property color primaryTextColor: "#F2F2F2" property color secondaryTextColor: "#AEAEAE" property color backgroundColor: "#1F1F1F" property color selectionColor: "#353535" property color borderColor: "#3F3F3F" property color legendLabelTextColor: "#FCFCFC" property alias graphsTheme: graphsDarkTheme GraphsTheme { id: graphsDarkTheme backgroundColor: "transparent" colorScheme: GraphsTheme.ColorScheme.Dark labelTextColor: darkTheme.primaryTextColor } } Component.onCompleted: { // Generate more colors for the series for (var i = 0; i < mainWindow.seriesBaseColors.length; ++i) { mainWindow.allSeriesColors[i + 8] = Qt.lighter(mainWindow.seriesBaseColors[i]); mainWindow.allSeriesColors[i + 16] = Qt.darker(mainWindow.seriesBaseColors[i]); mainWindow.allSeriesColors[i + 24] = Qt.lighter(Qt.lighter(mainWindow.seriesBaseColors[i])); mainWindow.allSeriesColors[i + 32] = Qt.darker(Qt.darker(mainWindow.seriesBaseColors[i])); } graphsDarkTheme.seriesColors = mainWindow.allSeriesColors; graphsLightTheme.seriesColors = mainWindow.allSeriesColors; } } Rectangle { id: background property alias dataModel: dataView.dataModel anchors.fill: parent color: activeTheme.backgroundColor Item { id: dataView property alias dataModel: dataModel anchors.top: background.top anchors.bottom: background.bottom anchors.left: background.left implicitWidth: 400 * Units.px implicitHeight: 719 * Units.px CustomTableView { id: customTableView implicitHeight: 320 * Units.px tableViewModel: dataModel horizontalHeaderViewModel: hHeaderModel anchors.top: dataView.top anchors.topMargin: 40 anchors.left: dataView.left anchors.right: dataView.right anchors.leftMargin: 24 * Units.px anchors.bottom: dataView.bottom anchors.bottomMargin: 294 * Units.px selectionColor: activeTheme.selectionColor backgroundColor: activeTheme.backgroundColor primaryTextColor: activeTheme.primaryTextColor secondaryTextColor: activeTheme.secondaryTextColor borderColor: activeTheme.borderColor title: qsTr("Medals") Connections { target: customTableView.dataSelectionModel function onSelectionChanged(selected, deselected) { if (customTableView.dataSelectionModel.selectedIndexes.length < 1) { graphView.graphsItem.clearGraph(); return; } const first = customTableView.mainTableView.cellAtIndex(customTableView.dataSelectionModel.selectedIndexes[0]); const last = customTableView.mainTableView.cellAtIndex( customTableView.dataSelectionModel.selectedIndexes[ customTableView.dataSelectionModel.selectedIndexes.length - 1]); graphView.graphsItem.updateModelMapper(first, last); const firstCategoryIndex = graphView.graphsItem.modelMapper.first; const lastCategoryIndex = graphView.graphsItem.modelMapper.count; graphView.graphsItem.categoryAxis.categories = customTableView.extractBarSetGategories( firstCategoryIndex, lastCategoryIndex); } } } SelectionRectangle { id: selectionRectangle target: customTableView.mainTableView } ListModel { id: hHeaderModel } LegendItem { id: legendItem anchors.top: customTableView.bottom anchors.left: dataView.left anchors.leftMargin: 24 * Units.px anchors.topMargin: 70 * Units.px labelTextColor: activeTheme.legendLabelTextColor titleTextColor: activeTheme.secondaryTextColor series: graphView.graphsItem.series } CsvDataModel { id: dataModel onModelReset: () => { const first = graphView.graphsItem.modelMapper.first; const count = graphView.graphsItem.modelMapper.count; graphView.graphsItem.categoryAxis.categories = customTableView.extractBarSetGategories(first, count); customTableView.fillHorizontalHeaderModel(dataModel.columnCount()); } Component.onCompleted: () => { dataModel.readCsv("qrc:/data/medals.csv"); } } } Item { id: graphView property alias graphsItem: graphsItem anchors.left: dataView.right anchors.right: background.right anchors.top: background.top anchors.bottom: background.bottom width: 800 * Units.px Graph { id: graphsItem anchors.fill: graphView chartView.marginLeft: 71 * Units.px chartView.marginRight: 43 * Units.px chartView.marginTop: 47 * Units.px chartView.marginBottom: 80 * Units.px theme: activeTheme.graphsTheme labelDelegateTextColor: activeTheme.secondaryTextColor } } } Component.onCompleted: () => { switch (Application.styleHints.colorScheme) { case Qt.Light: activeTheme = themes.lightTheme; break; case Qt.Dark: activeTheme = themes.darkTheme; break; } graphView.graphsItem.modelMapper.model = background.dataModel; } }