amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-30 07:03:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu 2023-12-05 11:42:21 +08:00
parent 711411f6a8
commit d255f5881e
12 changed files with 13490 additions and 12854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
example/example.qrc
View File

@ -190,5 +190,12 @@
<file>qml/global/Lang.qml</file> <file>qml/global/Lang.qml</file>
<file>qml/page/T_Network.qml</file> <file>qml/page/T_Network.qml</file>
<file>qml/page/T_ShortcutPicker.qml</file> <file>qml/page/T_ShortcutPicker.qml</file>
<file>qml/chart/T_BarChart.qml</file>
<file>qml/chart/T_LineChart.qml</file>
<file>qml/chart/T_PieChart.qml</file>
<file>qml/chart/T_RadarChart.qml</file>
<file>qml/chart/T_ScatterChart.qml</file>
<file>qml/chart/T_BubbleChart.qml</file>
<file>qml/chart/T_PolarAreaChart.qml</file>
</qresource> </qresource>
</RCC> </RCC>

73
example/qml/chart/T_BarChart.qml Normal file
View File

@ -0,0 +1,73 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Bar Chart"
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'bar'
chartData: { return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
}
}
}
}

75
example/qml/chart/T_BubbleChart.qml Normal file
View File

@ -0,0 +1,75 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Bubble Chart"
function randomScalingFactor() {
return Math.random().toFixed(1);
}
FluArea{
height: 370
width: 500
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'bubble'
chartData: {
return {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 12,
y: 70,
r: 20
}, {
x: 11,
y: 28,
r: 8
}, {
x: 9,
y: 28,
r: 10
}, {
x: 43,
y: 7,
r: 14
}, {
x: 22,
y: 22,
r: 12
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgb(255, 99, 132)'
}]
}}
chartOptions: {return {
maintainAspectRatio: false,
responsive: true,
hoverMode: 'nearest',
intersect: true,
title: {
display: true,
text: 'Chart.js Bubble Chart - Multi Axis'
}
}
}
}
}
}

46
example/qml/chart/T_LineChart.qml Normal file
View File

@ -0,0 +1,46 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Line Chart"
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'line'
chartData: { return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

94
example/qml/chart/T_PieChart.qml Normal file
View File

@ -0,0 +1,94 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Doughnut and Pie Chart"
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: "doughnut"
chartData: { return {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Doughnut Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: "pie"
chartData: { return {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Pie Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

58
example/qml/chart/T_PolarAreaChart.qml Normal file
View File

@ -0,0 +1,58 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"PolarArea Chart"
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'polarArea'
chartData: { return {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js PolarArea Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
}
}
}
}
}
}

75
example/qml/chart/T_RadarChart.qml Normal file
View File

@ -0,0 +1,75 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Radar Chart"
FluArea{
width: 500
height: 370
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'radar'
chartData: { return {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets:
[{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
}
}
chartOptions: { return {
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Radar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
elements: {
line: {
borderWidth: 3
}
}
}
}
}
}
}

124
example/qml/chart/T_ScatterChart.qml Normal file
View File

@ -0,0 +1,124 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "qrc:///example/qml/component"
import "../component"
FluScrollablePage{
title:"Scatter Chart"
function randomScalingFactor() {
return Math.random().toFixed(1);
}
FluArea{
height: 370
width: 500
paddings: 10
Layout.topMargin: 20
FluChart{
anchors.fill: parent
chartType: 'scatter'
chartData: {
return {
datasets: [{
label: 'My First dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-1',
borderColor: '#ff5555',
backgroundColor: 'rgba(255,192,192,0.3)',
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: 'My Second dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-2',
borderColor: '#5555ff',
backgroundColor: 'rgba(192,192,255,0.3)',
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
}}
chartOptions: {return {
maintainAspectRatio: false,
responsive: true,
hoverMode: 'nearest',
intersect: true,
title: {
display: true,
text: 'Chart.js Scatter Chart - Multi Axis'
},
scales: {
xAxes: [{
position: 'bottom',
gridLines: {
zeroLineColor: 'rgba(0,0,0,1)'
}
}],
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
reverse: true,
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
}
}
}
}

53
example/qml/global/ItemsOriginal.qml
View File

@ -368,6 +368,53 @@ FluObject{
} }
} }
FluPaneItemExpander{
title: Lang.chart
icon:FluentIcons.AreaChart
FluPaneItem{
title:Lang.bar_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_BarChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.line_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_LineChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.pie_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_PieChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.polar_area_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.bubble_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_BubbleChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.scatter_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_ScatterChart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{
title:Lang.radar_chart
menuDelegate: paneItemMenu
url:"qrc:/example/qml/chart/T_RadarChart.qml"
onTap:{ navigationView.push(url) }
}
}
FluPaneItemSeparator{ FluPaneItemSeparator{
spacing:10 spacing:10
size:1 size:1
@ -406,12 +453,6 @@ FluObject{
url:"qrc:/example/qml/page/T_Captcha.qml" url:"qrc:/example/qml/page/T_Captcha.qml"
onTap:{ navigationView.push(url) } onTap:{ navigationView.push(url) }
} }
FluPaneItem{
title:"Chart"
menuDelegate: paneItemMenu
url:"qrc:/example/qml/page/T_Chart.qml"
onTap:{ navigationView.push(url) }
}
FluPaneItem{ FluPaneItem{
title:"Network" title:"Network"
menuDelegate: paneItemMenu menuDelegate: paneItemMenu

24
example/qml/global/Lang.qml
View File

@ -20,6 +20,14 @@ QtObject {
property string locale property string locale
property string navigation_view_display_mode property string navigation_view_display_mode
property string other property string other
property string chart
property string bar_chart
property string line_chart
property string pie_chart
property string polar_area_chart
property string bubble_chart
property string scatter_chart
property string radar_chart
function zh(){ function zh(){
home="首页" home="首页"
@ -38,6 +46,14 @@ QtObject {
locale="语言环境" locale="语言环境"
navigation_view_display_mode="导航视图显示模式" navigation_view_display_mode="导航视图显示模式"
other="其他" other="其他"
chart="表格"
bar_chart="条形图"
line_chart="折线图"
pie_chart="饼图"
polar_area_chart="极坐标区域图"
bubble_chart="气泡图"
scatter_chart="散点图"
radar_chart="雷达图"
} }
function en(){ function en(){
@ -57,6 +73,14 @@ QtObject {
locale="Locale" locale="Locale"
navigation_view_display_mode="NavigationView Display Mode" navigation_view_display_mode="NavigationView Display Mode"
other="Other" other="Other"
chart="Chart"
bar_chart="Bar Chart"
line_chart="Line Chart"
pie_chart="Pie Chart"
polar_area_chart="Polar Area Chart"
bubble_chart="Bubble Chart"
scatter_chart="Scatter Chart"
radar_chart="Radar Chart"
} }
property string __locale property string __locale

63
src/Qt5/imports/FluentUI/Controls/FluChart.qml
View File

@ -4,25 +4,27 @@ import "./../JS/Chart.js" as Chart
Canvas { Canvas {
id: control id: control
property var window: Window.window
property var jsChart: undefined
property string chartType property string chartType
property var chartData property var chartData
property var chartOptions property var chartOptions
property double chartAnimationProgress: 0.1 property double chartAnimationProgress: 0.1
property int animationEasingType: Easing.InOutExpo property int animationEasingType: Easing.InOutExpo
property double animationDuration: 0 property double animationDuration: 300
property var memorizedContext
property var memorizedData
property var memorizedOptions
property alias animationRunning: chartAnimator.running property alias animationRunning: chartAnimator.running
signal animationFinished() signal animationFinished()
function animateToNewData() function animateToNewData()
{ {
chartAnimationProgress = 0.1; chartAnimationProgress = 0.1;
jsChart.update(); d.jsChart.update();
chartAnimator.restart(); chartAnimator.restart();
} }
QtObject{
id:d
property var jsChart: undefined
property var memorizedContext
property var memorizedData
property var memorizedOptions
}
MouseArea { MouseArea {
id: event id: event
anchors.fill: control anchors.fill: control
@ -56,11 +58,11 @@ Canvas {
control.requestPaint(); control.requestPaint();
} }
onClicked:(mouse)=> { onClicked:(mouse)=> {
submitEvent(mouse, "click"); submitEvent(mouse, "click");
} }
onPositionChanged:(mouse)=> { onPositionChanged:(mouse)=> {
submitEvent(mouse, "mousemove"); submitEvent(mouse, "mousemove");
} }
onExited: { onExited: {
submitEvent(undefined, "mouseout"); submitEvent(undefined, "mouseout");
} }
@ -68,11 +70,11 @@ Canvas {
submitEvent(undefined, "mouseenter"); submitEvent(undefined, "mouseenter");
} }
onPressed:(mouse)=> { onPressed:(mouse)=> {
submitEvent(mouse, "mousedown"); submitEvent(mouse, "mousedown");
} }
onReleased:(mouse)=> { onReleased:(mouse)=> {
submitEvent(mouse, "mouseup"); submitEvent(mouse, "mouseup");
} }
} }
PropertyAnimation { PropertyAnimation {
id: chartAnimator id: chartAnimator
@ -90,34 +92,25 @@ Canvas {
control.requestPaint(); control.requestPaint();
} }
onPaint: { onPaint: {
if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) { if(control.getContext('2d') !== null && d.memorizedContext !== control.getContext('2d') || d.memorizedData !== control.chartData || d.memorizedOptions !== control.chartOptions) {
var ctx = control.getContext('2d'); var ctx = control.getContext('2d');
d.jsChart = Chart.build(ctx, {type: control.chartType,data: control.chartData,options: control.chartOptions});
jsChart = Chart.build(ctx, { d.memorizedData = control.chartData ;
type: control.chartType, d.memorizedContext = control.getContext('2d');
data: control.chartData, d.memorizedOptions = control.chartOptions;
options: control.chartOptions d.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
});
memorizedData = control.chartData ;
memorizedContext = control.getContext('2d');
memorizedOptions = control.chartOptions;
control.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
chartAnimator.start(); chartAnimator.start();
} }
d.jsChart.draw(chartAnimationProgress);
jsChart.draw(chartAnimationProgress);
} }
onWidthChanged: { onWidthChanged: {
if(jsChart) { if(d.jsChart) {
jsChart.resize(); d.jsChart.resize();
} }
} }
onHeightChanged: { onHeightChanged: {
if(jsChart) { if(d.jsChart) {
jsChart.resize(); d.jsChart.resize();
} }
} }
} }

25652
src/Qt5/imports/FluentUI/JS/Chart.js vendored
View File

File diff suppressed because it is too large Load Diff