@esic-lab/data-core-ui 0.0.84 → 0.0.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +27 -0
- package/dist/index.js +37 -22
- package/dist/index.mjs +37 -23
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -339,6 +339,24 @@
|
|
|
339
339
|
.z-50 {
|
|
340
340
|
z-index: 50;
|
|
341
341
|
}
|
|
342
|
+
.container {
|
|
343
|
+
width: 100%;
|
|
344
|
+
@media (width >= 40rem) {
|
|
345
|
+
max-width: 40rem;
|
|
346
|
+
}
|
|
347
|
+
@media (width >= 48rem) {
|
|
348
|
+
max-width: 48rem;
|
|
349
|
+
}
|
|
350
|
+
@media (width >= 64rem) {
|
|
351
|
+
max-width: 64rem;
|
|
352
|
+
}
|
|
353
|
+
@media (width >= 80rem) {
|
|
354
|
+
max-width: 80rem;
|
|
355
|
+
}
|
|
356
|
+
@media (width >= 96rem) {
|
|
357
|
+
max-width: 96rem;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
342
360
|
.mx-2 {
|
|
343
361
|
margin-inline: calc(var(--spacing) * 2);
|
|
344
362
|
}
|
|
@@ -1297,6 +1315,15 @@
|
|
|
1297
1315
|
var(--tw-ring-shadow),
|
|
1298
1316
|
var(--tw-shadow);
|
|
1299
1317
|
}
|
|
1318
|
+
.ring {
|
|
1319
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1320
|
+
box-shadow:
|
|
1321
|
+
var(--tw-inset-shadow),
|
|
1322
|
+
var(--tw-inset-ring-shadow),
|
|
1323
|
+
var(--tw-ring-offset-shadow),
|
|
1324
|
+
var(--tw-ring-shadow),
|
|
1325
|
+
var(--tw-shadow);
|
|
1326
|
+
}
|
|
1300
1327
|
.outline {
|
|
1301
1328
|
outline-style: var(--tw-outline-style);
|
|
1302
1329
|
outline-width: 1px;
|
package/dist/index.js
CHANGED
|
@@ -4558,7 +4558,7 @@ function ProfileSelect({
|
|
|
4558
4558
|
"span",
|
|
4559
4559
|
{
|
|
4560
4560
|
className: "font-semibold body-3 line-clamp-1",
|
|
4561
|
-
title: company
|
|
4561
|
+
title: `${company} (${users.length})`,
|
|
4562
4562
|
children: [
|
|
4563
4563
|
company,
|
|
4564
4564
|
" (",
|
|
@@ -5175,18 +5175,31 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
|
|
|
5175
5175
|
},
|
|
5176
5176
|
className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
|
|
5177
5177
|
children: [
|
|
5178
|
-
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
5179
|
-
|
|
5180
|
-
|
|
5181
|
-
{
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
|
|
5185
|
-
|
|
5186
|
-
|
|
5187
|
-
|
|
5188
|
-
|
|
5189
|
-
|
|
5178
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
5179
|
+
"div",
|
|
5180
|
+
{
|
|
5181
|
+
className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`,
|
|
5182
|
+
children: [
|
|
5183
|
+
mode === "project" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
5184
|
+
"div",
|
|
5185
|
+
{
|
|
5186
|
+
style: {
|
|
5187
|
+
backgroundColor: element.color || "#E9E9E9"
|
|
5188
|
+
},
|
|
5189
|
+
className: "w-[10px] h-[10px] rounded-full"
|
|
5190
|
+
}
|
|
5191
|
+
),
|
|
5192
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
5193
|
+
"div",
|
|
5194
|
+
{
|
|
5195
|
+
className: "line-clamp-1 break-words text-[#333]",
|
|
5196
|
+
title: element.label,
|
|
5197
|
+
children: element.label
|
|
5198
|
+
}
|
|
5199
|
+
)
|
|
5200
|
+
]
|
|
5201
|
+
}
|
|
5202
|
+
),
|
|
5190
5203
|
mode === "project" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: safeEndDate ? (0, import_date_fns3.format)(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: import_locale3.th }) : "-" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: `Q${(0, import_date_fns3.getQuarter)(
|
|
5191
5204
|
safeEndDate ?? /* @__PURE__ */ new Date()
|
|
5192
5205
|
)}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
|
|
@@ -5264,10 +5277,10 @@ var GanttChart = ({
|
|
|
5264
5277
|
svg.selectAll("*").remove();
|
|
5265
5278
|
const chartGroup = svg.append("g").attr("transform", `translate(${margin.left}, ${totalHeaderHeight})`);
|
|
5266
5279
|
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
5267
|
-
const domainStart = (0, import_date_fns3.startOfDay)(
|
|
5268
|
-
|
|
5269
|
-
(0, import_date_fns3.addDays)((0, import_date_fns3.endOfYear)(new Date(currentYear, 0, 1)), 1)
|
|
5280
|
+
const domainStart = (0, import_date_fns3.startOfDay)(
|
|
5281
|
+
(0, import_date_fns3.startOfYear)(new Date(currentYear, -1, 9, 1))
|
|
5270
5282
|
);
|
|
5283
|
+
const domainEnd = (0, import_date_fns3.startOfDay)(new Date(currentYear, 9, 1));
|
|
5271
5284
|
const xScale = d33.scaleTime().domain([domainStart, domainEnd]).range([0, containerWidth - margin.left - margin.right]);
|
|
5272
5285
|
const buildTimeBuckets = (domain) => ({
|
|
5273
5286
|
uniqueYears: d33.timeYear.every(1)?.range(domain[0], domain[1]) || [],
|
|
@@ -5282,14 +5295,16 @@ var GanttChart = ({
|
|
|
5282
5295
|
) || []
|
|
5283
5296
|
});
|
|
5284
5297
|
const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
|
|
5285
|
-
layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
|
|
5286
|
-
const
|
|
5287
|
-
|
|
5298
|
+
layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d) - (newXScale(d) - newXScale((0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1))))).attr("y", -totalHeaderHeight).attr("width", (d) => {
|
|
5299
|
+
const start = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1));
|
|
5300
|
+
const end = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear(), 9, 1));
|
|
5301
|
+
return newXScale(end) - newXScale(start);
|
|
5288
5302
|
}).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
|
|
5289
5303
|
layer1.selectAll(".year-label").data(buckets.uniqueYears).enter().append("text").attr("class", "year-label").attr("x", (d) => {
|
|
5290
|
-
const
|
|
5291
|
-
|
|
5292
|
-
|
|
5304
|
+
const start = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1));
|
|
5305
|
+
const end = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear(), 9, 1));
|
|
5306
|
+
return newXScale(start) + (newXScale(end) - newXScale(start)) / 2;
|
|
5307
|
+
}).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E1B\u0E35\u0E07\u0E1A\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 ${d.getFullYear() + 543}`);
|
|
5293
5308
|
const quarters2 = [];
|
|
5294
5309
|
buckets.uniqueYears.forEach((year) => {
|
|
5295
5310
|
for (let q = 0; q < 4; q++) {
|
package/dist/index.mjs
CHANGED
|
@@ -4492,7 +4492,7 @@ function ProfileSelect({
|
|
|
4492
4492
|
"span",
|
|
4493
4493
|
{
|
|
4494
4494
|
className: "font-semibold body-3 line-clamp-1",
|
|
4495
|
-
title: company
|
|
4495
|
+
title: `${company} (${users.length})`,
|
|
4496
4496
|
children: [
|
|
4497
4497
|
company,
|
|
4498
4498
|
" (",
|
|
@@ -5007,7 +5007,6 @@ import {
|
|
|
5007
5007
|
format as format4,
|
|
5008
5008
|
eachWeekOfInterval,
|
|
5009
5009
|
startOfYear,
|
|
5010
|
-
endOfYear,
|
|
5011
5010
|
startOfDay,
|
|
5012
5011
|
addDays,
|
|
5013
5012
|
eachHourOfInterval,
|
|
@@ -5123,18 +5122,31 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
|
|
|
5123
5122
|
},
|
|
5124
5123
|
className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
|
|
5125
5124
|
children: [
|
|
5126
|
-
/* @__PURE__ */ jsxs39(
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
{
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
|
|
5133
|
-
|
|
5134
|
-
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5125
|
+
/* @__PURE__ */ jsxs39(
|
|
5126
|
+
"div",
|
|
5127
|
+
{
|
|
5128
|
+
className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`,
|
|
5129
|
+
children: [
|
|
5130
|
+
mode === "project" && /* @__PURE__ */ jsx48(
|
|
5131
|
+
"div",
|
|
5132
|
+
{
|
|
5133
|
+
style: {
|
|
5134
|
+
backgroundColor: element.color || "#E9E9E9"
|
|
5135
|
+
},
|
|
5136
|
+
className: "w-[10px] h-[10px] rounded-full"
|
|
5137
|
+
}
|
|
5138
|
+
),
|
|
5139
|
+
/* @__PURE__ */ jsx48(
|
|
5140
|
+
"div",
|
|
5141
|
+
{
|
|
5142
|
+
className: "line-clamp-1 break-words text-[#333]",
|
|
5143
|
+
title: element.label,
|
|
5144
|
+
children: element.label
|
|
5145
|
+
}
|
|
5146
|
+
)
|
|
5147
|
+
]
|
|
5148
|
+
}
|
|
5149
|
+
),
|
|
5138
5150
|
mode === "project" ? /* @__PURE__ */ jsx48("div", { children: safeEndDate ? format4(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: th }) : "-" }) : /* @__PURE__ */ jsx48("div", { children: `Q${getQuarter(
|
|
5139
5151
|
safeEndDate ?? /* @__PURE__ */ new Date()
|
|
5140
5152
|
)}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
|
|
@@ -5212,10 +5224,10 @@ var GanttChart = ({
|
|
|
5212
5224
|
svg.selectAll("*").remove();
|
|
5213
5225
|
const chartGroup = svg.append("g").attr("transform", `translate(${margin.left}, ${totalHeaderHeight})`);
|
|
5214
5226
|
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
5215
|
-
const domainStart = startOfDay(
|
|
5216
|
-
|
|
5217
|
-
addDays(endOfYear(new Date(currentYear, 0, 1)), 1)
|
|
5227
|
+
const domainStart = startOfDay(
|
|
5228
|
+
startOfYear(new Date(currentYear, -1, 9, 1))
|
|
5218
5229
|
);
|
|
5230
|
+
const domainEnd = startOfDay(new Date(currentYear, 9, 1));
|
|
5219
5231
|
const xScale = d33.scaleTime().domain([domainStart, domainEnd]).range([0, containerWidth - margin.left - margin.right]);
|
|
5220
5232
|
const buildTimeBuckets = (domain) => ({
|
|
5221
5233
|
uniqueYears: d33.timeYear.every(1)?.range(domain[0], domain[1]) || [],
|
|
@@ -5230,14 +5242,16 @@ var GanttChart = ({
|
|
|
5230
5242
|
) || []
|
|
5231
5243
|
});
|
|
5232
5244
|
const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
|
|
5233
|
-
layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
|
|
5234
|
-
const
|
|
5235
|
-
|
|
5245
|
+
layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d) - (newXScale(d) - newXScale(startOfDay(new Date(d.getFullYear() - 1, 9, 1))))).attr("y", -totalHeaderHeight).attr("width", (d) => {
|
|
5246
|
+
const start = startOfDay(new Date(d.getFullYear() - 1, 9, 1));
|
|
5247
|
+
const end = startOfDay(new Date(d.getFullYear(), 9, 1));
|
|
5248
|
+
return newXScale(end) - newXScale(start);
|
|
5236
5249
|
}).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
|
|
5237
5250
|
layer1.selectAll(".year-label").data(buckets.uniqueYears).enter().append("text").attr("class", "year-label").attr("x", (d) => {
|
|
5238
|
-
const
|
|
5239
|
-
|
|
5240
|
-
|
|
5251
|
+
const start = startOfDay(new Date(d.getFullYear() - 1, 9, 1));
|
|
5252
|
+
const end = startOfDay(new Date(d.getFullYear(), 9, 1));
|
|
5253
|
+
return newXScale(start) + (newXScale(end) - newXScale(start)) / 2;
|
|
5254
|
+
}).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E1B\u0E35\u0E07\u0E1A\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 ${d.getFullYear() + 543}`);
|
|
5241
5255
|
const quarters2 = [];
|
|
5242
5256
|
buckets.uniqueYears.forEach((year) => {
|
|
5243
5257
|
for (let q = 0; q < 4; q++) {
|