Skip to content

Commit

Permalink
refactor!: improve rendering graph
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: settings for vertical layout no longer exist
  • Loading branch information
@orblazer
orblazer committed Mar 29, 2024
1 parent 86865e0 commit 82591bd
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 72 deletions.
3 changes: 0 additions & 3 deletions package/contents/config/main.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
</group>

<group name="Appearance">
<entry name="verticalLayout" type="Bool">
<default>false</default>
</entry>
<entry name="historyAmount" type="Int">
<default>10</default>
</entry>
Expand Down
6 changes: 0 additions & 6 deletions package/contents/ui/config/ConfigAppearance.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ KCM.AbstractKCM {
Kirigami.ColumnView.fillWidth: true

// Chart
property alias cfg_verticalLayout: verticalLayout.checked
property alias cfg_historyAmount: historyAmount.realValue
property alias cfg_customGraphWidth: graphWidth.customized
property alias cfg_graphWidth: graphWidth.value
Expand Down Expand Up @@ -68,11 +67,6 @@ KCM.AbstractKCM {

// Charts
Kirigami.FormLayout {
QtControls.CheckBox {
id: verticalLayout
text: i18n("Vertical layout")
}

RMControls.PredefinedSpinBox {
id: historyAmount
Kirigami.FormData.label: i18n("History amount:")
Expand Down
145 changes: 82 additions & 63 deletions package/contents/ui/main.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,46 +27,107 @@ PlasmoidItem {
id: root

readonly property int graphVersion: 1 //? Bump when some settings changes in "graphs" structure
readonly property bool vertical: Plasmoid.formFactor === PlasmaCore.Types.Vertical
readonly property bool isVertical: {
switch (Plasmoid.formFactor) {
case PlasmaCore.Types.Planar:
case PlasmaCore.Types.MediaCenter:
case PlasmaCore.Types.Application:
default:
if (root.height > root.width) {
return true;
} else {
return false;
}
case PlasmaCore.Types.Vertical:
return true;
case PlasmaCore.Types.Horizontal:
return false;
}
}

// Settings properties
property bool verticalLayout: Plasmoid.configuration.verticalLayout
property double fontScale: (Plasmoid.configuration.fontScale / 100)

// Component properties
property int itemMargin: Plasmoid.configuration.graphMargin
property double parentWidth: parent === null ? 0 : parent.width
property double parentHeight: parent === null ? 0 : parent.height
property double initWidth: vertical ? (verticalLayout ? parentWidth : (parentWidth - itemMargin) / 2) : (verticalLayout ? (parentHeight - itemMargin) / 2 : parentHeight)
property double itemWidth: _getCustomConfig("graphWidth", Math.round(initWidth * (verticalLayout ? 1 : 1.5)))
property double initWidth: isVertical ? ((parentWidth - itemMargin) / 2) : parentHeight
property double itemWidth: _getCustomConfig("graphWidth", Math.round(initWidth * (isVertical ? 1 : 1.5)))
property double itemHeight: _getCustomConfig("graphHeight", Math.round(initWidth))
property double fontPixelSize: Math.round(verticalLayout ? (itemHeight / 1.4 * fontScale) : (itemHeight * fontScale))
property double fontPixelSize: Math.round(isVertical ? (itemHeight / 1.4 * fontScale) : (itemHeight * fontScale))
property var graphsModel: (JSON.parse(Plasmoid.configuration.graphs) || []).filter(v => v._v === graphVersion)

// Initialize JS functions
Component.onCompleted: Functions.init(Kirigami.Theme)

// Content
Plasmoid.backgroundHints: PlasmaCore.Types.DefaultBackground | PlasmaCore.Types.ConfigurableBackground
Plasmoid.configurationRequired: graphsModel.length === 0 // Check if graphs is valid and have some items
preferredRepresentation: Plasmoid.configurationRequired ? compactRepresentation : fullRepresentation
fullRepresentation: MouseArea {
Layout.preferredWidth: !verticalLayout ? (itemWidth * graphView.model.length + itemMargin * (graphView.model.length + 1)) : itemWidth
Layout.preferredHeight: verticalLayout ? (itemHeight * graphView.model.length + itemMargin * (graphView.model.length + 1)) : itemHeight
LayoutMirroring.enabled: !vertical && Qt.application.layoutDirection === Qt.RightToLeft
preferredRepresentation: Plasmoid.configurationRequired ? compactRepresentation : fullRepresentation // Show graphs only if at least 1 is present, otherwise ask to configure

fullRepresentation: ListView {
id: graphView
Layout.preferredWidth: !isVertical ? (itemWidth * graphView.model.length + itemMargin * (graphView.model.length + 1)) : itemWidth
Layout.preferredHeight: isVertical ? (itemHeight * graphView.model.length + itemMargin * (graphView.model.length + 1)) : itemHeight
LayoutMirroring.enabled: !isVertical && Qt.application.layoutDirection === Qt.RightToLeft
LayoutMirroring.childrenInherit: true
interactive: false

// Click action
//? NOTE: This is hacky way for replace "Kio.KRun" due to limitation of access to C++ in widget without deploying package
//? This have a lot limitation due to cannot open applications with `kioclient exec`, `kstart --application` or `xdg-open`.
Plasma5Support.DataSource {
id: runner
engine: "executable"
connectedSources: []
onNewData: disconnectSource(sourceName)
spacing: Plasmoid.configuration.graphMargin
orientation: isVertical ? ListView.Vertical : ListView.Horizontal

// Render
model: graphsModel
reuseItems: true
delegate: Loader {
required property var modelData

width: itemWidth
height: itemHeight

onLoaded: {
item.textContainer.firstLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
item.textContainer.secondLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
item.textContainer.thirdLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
}
Component.onCompleted: {
const typeCaptitalized = modelData.type.charAt(0).toUpperCase() + modelData.type.slice(1);
// Retrieve props without un wanted internals
let props = {};
for (const [key, value] of Object.entries(modelData)) {
if (key === "_v" || key === "type") {
continue;
}
props[key] = value;
}

// Load graph
setSource(`./components/graph/${typeCaptitalized}Graph.qml`, props);
}
}
onClicked: {
if (Plasmoid.configuration.clickActionCommand !== "") {
runner.connectSource(Plasmoid.configuration.clickActionCommand);
function getGraph(index) {
const loaderItem = graphView.itemAtIndex(index);
return loaderItem !== null ? loaderItem.item : null;
}

// Click action
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton

//? NOTE: This is hacky way for replace "Kio.KRun" due to limitation of access to C++ in widget without deploying package
//? This have a lot limitation due to cannot open applications with `kioclient exec`, `kstart --application` or `xdg-open`.
Plasma5Support.DataSource {
id: runner
engine: "executable"
connectedSources: []
onNewData: disconnectSource(sourceName)
}
onClicked: {
if (Plasmoid.configuration.clickActionCommand !== "") {
runner.connectSource(Plasmoid.configuration.clickActionCommand);
}
}
}

Expand All @@ -88,48 +149,6 @@ PlasmoidItem {
}
}
}

// Main Layout
ListView {
id: graphView
anchors.fill: parent
spacing: itemMargin
orientation: verticalLayout ? ListView.Vertical : ListView.Horizontal
interactive: false
reuseItems: true

// TODO: Better handle "graphs" change
model: graphsModel

delegate: Loader {
required property var modelData

width: itemWidth
height: itemHeight

onLoaded: {
item.textContainer.firstLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
item.textContainer.secondLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
item.textContainer.thirdLineLabel.font.pixelSize = Qt.binding(() => root.fontPixelSize);
}
Component.onCompleted: {
const filename = (modelData.type.charAt(0).toUpperCase() + modelData.type.slice(1)) + "Graph";
const source = `./components/graph/${filename}.qml`;

// Remove internal props
delete modelData._v;
delete modelData.type;

// Load graph
setSource(source, modelData);
}
}

function getGraph(index) {
const loaderItem = graphView.itemAtIndex(index);
return loaderItem !== null ? loaderItem.item : null;
}
}
}

function _getCustomConfig(property, fallback) {
Expand Down

0 comments on commit 82591bd

Please sign in to comment.