Skip to content

Dashboard and form improvement #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tungleduyxyz merged 2 commits into from
May 19, 2026
Merged

Dashboard and form improvement #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2783f9a
Dashboard and form improvement
tungleduyxyz May 16, 2026
0786fb8
Relace d3_rails by D3 library
tungleduyxyz May 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions app/assets/javascripts/kanaui/kiddo/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,12 @@
var self = this;

var makeXAxis = function () {
return d3.svg.axis().scale(self.x).orient("bottom").ticks(6);
return d3.axisBottom(self.x).ticks(6);
};

var makeYAxis = function () {
return d3.svg
.axis()
.scale(self.y)
.orient("left")
return d3
.axisLeft(self.y)
.tickFormat(d3.format(",d"));
};

Expand All @@ -28,13 +26,13 @@
"transform",
"translate(" + self.margin_left + "," + self.height + ")"
)
.call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
.call(makeXAxis().tickSize(-self.height).tickFormat(""));

svg
.append("g")
.attr("class", "grid")
.attr("transform", "translate(" + self.margin_left + ",0)")
.call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
.call(makeYAxis().tickSize(-self.width).tickFormat(""));

svg
.append("g")
Expand Down
67 changes: 31 additions & 36 deletions app/assets/javascripts/kanaui/kiddo/charts/line_chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,71 @@
Kiddo.LineChart = function () {
var self = this;

this.x = d3.time.scale().range([0, this.width]);
this.y = d3.scale.linear().range([this.height, 0]);
this.x = d3.scaleTime().range([0, this.width]);
this.y = d3.scaleLinear().range([this.height, 0]);

var valueline = d3.svg
var valueline = d3
.line()
.x(function (d) {
return self.x(d.x);
})
.y(function (d) {
return self.y(d.y);
})
.interpolate("monotone"); // Smooth line interpolation
.curve(d3.curveMonotoneX);

var axes = Kiddo.Axes.apply(this);
var helper = new Kiddo.Helper();

// Custom blue color theme matching the image
var blueColors = [
"#1565C0",
"#1976D2",
"#2196F3",
"#42A5F5",
"#64B5F6",
"#90CAF9",
"#BBDEFB",
"#E3F2FD",
// Custom multi-color theme matching the image
var colors = [
"#2196F3", // blue
"#E53935", // red
"#43A047", // green
"#FB8C00", // orange
"#8E24AA", // purple
"#00ACC1", // cyan
"#F4511E", // deep orange
"#6D4C41", // brown
];
self.color = d3.scale.ordinal().range(blueColors);
self.color = d3.scaleOrdinal().range(colors);

return {
render: function (svg, json) {
var title = json.title,
datasets = json.data;

datasets.forEach(function (dataset) {
dataset.values.forEach(function (d) {
d.date = d.x.split("T")[0];
d.x = helper.parseDate(d.date);
d.y = +d.y;
});
});

// Scale the range of the data before rendering axes
var allValues = datasets.reduce(function (result, element) {
return result.concat(element.values);
}, []);

var x_domain = d3.extent(allValues, function (d) {
return new Date(d.x);
return d.x;
});

self.x.domain(x_domain);

var y_domain = [
d3.min(datasets, function (datum) {
return d3.min(datum.values, function (d) {
return d.y;
});
}),
d3.max(datasets, function (datum) {
return d3.max(datum.values, function (d) {
return d.y;
});
}),
];
var y_domain = d3.extent(allValues, function (d) {
return d.y;
});

self.y.domain(y_domain);

// Render axes first
axes.render(svg, title);

self.color.domain(d3.keys(datasets));
self.color.domain(datasets.map(function (dataset) {
return dataset.name;
}));

// Create legend container at the top
var legendContainer = svg
Expand Down Expand Up @@ -108,7 +109,7 @@

// Add text label
var labelText =
d.name + " :: " + d.count + ": " + d3.format(",.2f")(d.value);
helper.formatSeriesName(d.name) + " (" + d.count + "): " + d3.format(",.2f")(d.value);
legendItem
.append("text")
.attr("x", xOffset + 18)
Expand All @@ -129,12 +130,6 @@
var data = dataset.values,
name = dataset.name;

data.forEach(function (d) {
d.date = d.x.split("T")[0]; // Support both date and date/times
d.x = helper.parseDate(d.date);
d.y = +d.y;
});

svg
.append("path")
.attr("class", "line")
Expand Down
31 changes: 18 additions & 13 deletions app/assets/javascripts/kanaui/kiddo/charts/pie_chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,27 @@
Kiddo.PieChart = function () {
var self = this;
var radius = Math.min(this.width, this.height) / 2;
var helper = new Kiddo.Helper();

// Custom blue color theme - matching the line chart
var blueColors = [
"#1565C0",
"#1976D2",
"#2196F3",
"#42A5F5",
"#64B5F6",
"#90CAF9",
"#BBDEFB",
"#E3F2FD",
var colors = [
"#2196F3", // blue
"#E53935", // red
"#43A047", // green
"#FB8C00", // orange
"#8E24AA", // purple
"#00ACC1", // cyan
"#F4511E", // deep orange
"#6D4C41", // brown
];
var color = d3.scale.ordinal().range(blueColors);
var color = d3.scaleOrdinal().range(colors);

var arc = d3.svg
var arc = d3
.arc()
.outerRadius(radius - 10)
.innerRadius(0);

var pie = d3.layout
var pie = d3
.pie()
.sort(null)
.value(function (d) {
Expand All @@ -41,6 +42,10 @@
d.value = +d.value;
});

color.domain(data.map(function (d, index) {
return index;
}));

var g = svg
.selectAll(".arc")
.data(pie(data))
Expand Down Expand Up @@ -74,7 +79,7 @@
})
.html(function (d, i) {
return (
colorCircle(d.data.value, i) + d.data.label + ": " + d.data.value
colorCircle(d.data.value, i) + helper.formatSeriesName(d.data.label) + ": " + d.data.value
);
})
.attr("class", "chart_values");
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@
.attr("transform", "translate(" + self.margin_left + ",0)");
});

function mousemove() {
var _this = this;
function mousemove(event) {
var mouseX = d3.pointer(event, this)[0];

$("#mouseover_canvas .chart_values").detach().remove();
$("#mouseover_canvas .chart_circles").detach().remove();
Expand All @@ -94,7 +94,7 @@
var data = element.values;
var name = element.name;

var x0 = x.invert(d3.mouse(_this)[0]),
var x0 = x.invert(mouseX),
i = helper.bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i];
Expand Down
47 changes: 45 additions & 2 deletions app/assets/javascripts/kanaui/kiddo/helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,58 @@
};
var formatValue = d3.format(",.2f");

var humanizeSegment = function (segment) {
segment = String(segment || "")
.replace(/[_-]+/g, " ")
.replace(/\s+/g, " ")
.trim();

if (!segment) {
return "";
}

return segment
.split(" ")
.map(function (word) {
if (/^\d+(\.\d+)?$/.test(word)) {
return word;
}
if (/^[A-Z]{2,3}$/.test(word)) {
return word;
}

return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
})
.join(" ");
};

var formatSeriesName = function (name) {
return String(name || "")
.split(/\s*::\s*/)
.map(function (segment) {
var parts = segment.split(/\s*:\s*/);
if (parts.length > 1) {
return humanizeSegment(parts[0]) + " (" + humanizeSegment(parts.slice(1).join(": ")) + ")";
}

return humanizeSegment(segment);
})
.filter(function (segment) {
return segment.length > 0;
})
.join(" / ");
};

return {
parseDate: d3.time.format("%Y-%m-%d").parse,
parseDate: d3.timeParse("%Y-%m-%d"),
bisectDate: d3.bisector(function (d) {
return d.x;
}).left,
formatCurrency: formatCurrency,
formatValue: formatValue,
formatSeriesName: formatSeriesName,
formatValueDisplay: function (name, d) {
return name + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(d.y); }
return formatSeriesName(name) + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(d.y); }
},
};
};
Expand Down
14 changes: 7 additions & 7 deletions app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,11 @@
return;
}

d3.json($("#chartAnchor").data("reports-path"), function (error, json) {
d3.json($("#chartAnchor").data("reports-path")).then(function (json) {
$("#loading-spinner").remove();

var renderer = new Kiddo.Renderer("#chartAnchor");

if (error) {
var message = errorMessage(error);
renderError(message);
return renderer.noData();
}

var data = json[0];

if (
Expand Down Expand Up @@ -72,6 +66,12 @@
console.log(ex);
renderer.noData();
}
}).catch(function (error) {
$("#loading-spinner").remove();

var renderer = new Kiddo.Renderer("#chartAnchor");
renderError(errorMessage(error));
return renderer.noData();
});
});
})(d3, jQuery, window, document);
5 changes: 5 additions & 0 deletions app/assets/stylesheets/kanaui/kanaui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,11 @@
color: #d92d20 !important;
}

.kanaui-reports-index .disabled-table-button {
color: #98a2b3 !important;
cursor: not-allowed;
}

.kanaui-reports-index .edit-button {
color: #535862 !important;
}
Expand Down
Loading
Loading