mirror of https://github.com/zulip/zulip.git
analytics: Move range selector buttons and hover information.
Because some button text is much longer in different languages, there is an existing bug when the charts are rendered with the range selector buttons positioned on the right side of the chart. This positions the range selector buttons to the left side of the chart and the hover information to the right side of the chart. For the pie charts and horizontal bar chart, the grouping buttons labeled "Me" and "Everyone" are moved to the top of the chart, which matches the grouping buttons on the vertical bar charts. Adjusts some chart margins for new positioning of buttons and hover information. Deduplicates some shared code for rangeselector buttons in `stats.js` for the three vertical bar charts.
This commit is contained in:
Lauryn Menard
Tim Abbott
parent
687160432c
commit
fdc1335e3a
|
|
@ -122,6 +122,19 @@ $(() => {
|
|||
// Add configuration for any additional tooltips here.
|
||||
});
|
||||
|
||||
// Helper used in vertical bar charts
|
||||
function make_rangeselector(button1, button2) {
|
||||
return {
|
||||
x: -0.045,
|
||||
y: -0.62,
|
||||
buttons: [
|
||||
{stepmode: "backward", ...button1},
|
||||
{stepmode: "backward", ...button2},
|
||||
{step: "all", label: $t({defaultMessage: "All time"})},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// SUMMARY STATISTICS
|
||||
function get_user_summary_statistics(data) {
|
||||
if (data.length === 0) {
|
||||
|
|
@ -220,7 +233,7 @@ function populate_messages_sent_over_time(data) {
|
|||
barmode: "group",
|
||||
width: 750,
|
||||
height: 400,
|
||||
margin: {l: 40, r: 0, b: 40, t: 0},
|
||||
margin: {l: 40, r: 10, b: 40, t: 0},
|
||||
xaxis: {
|
||||
fixedrange: true,
|
||||
rangeslider: {bordercolor: "#D8D8D8", borderwidth: 1},
|
||||
|
|
@ -237,28 +250,12 @@ function populate_messages_sent_over_time(data) {
|
|||
font: font_12pt,
|
||||
};
|
||||
|
||||
function make_rangeselector(x, y, button1, button2) {
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
buttons: [
|
||||
{stepmode: "backward", ...button1},
|
||||
{stepmode: "backward", ...button2},
|
||||
{step: "all", label: $t({defaultMessage: "All time"})},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// This is also the cumulative rangeselector
|
||||
const daily_rangeselector = make_rangeselector(
|
||||
0.68,
|
||||
-0.62,
|
||||
{count: 10, label: $t({defaultMessage: "Last 10 days"}), step: "day"},
|
||||
{count: 30, label: $t({defaultMessage: "Last 30 days"}), step: "day"},
|
||||
);
|
||||
const weekly_rangeselector = make_rangeselector(
|
||||
0.656,
|
||||
-0.62,
|
||||
{count: 2, label: $t({defaultMessage: "Last 2 months"}), step: "month"},
|
||||
{count: 6, label: $t({defaultMessage: "Last 6 months"}), step: "month"},
|
||||
);
|
||||
|
|
@ -509,7 +506,7 @@ function populate_messages_sent_by_client(data) {
|
|||
const layout = {
|
||||
width: 750,
|
||||
height: null, // set in draw_plot()
|
||||
margin: {l: 3, r: 40, b: 40, t: 0},
|
||||
margin: {l: 10, r: 10, b: 40, t: 10},
|
||||
font: font_14pt,
|
||||
xaxis: {range: null}, // set in draw_plot()
|
||||
yaxis: {showticklabels: false},
|
||||
|
|
@ -648,7 +645,7 @@ function populate_messages_sent_by_client(data) {
|
|||
|
||||
function populate_messages_sent_by_message_type(data) {
|
||||
const layout = {
|
||||
margin: {l: 90, r: 0, b: 0, t: 0},
|
||||
margin: {l: 90, r: 0, b: 10, t: 0},
|
||||
width: 750,
|
||||
height: 300,
|
||||
legend: {
|
||||
|
|
@ -765,32 +762,19 @@ function populate_messages_sent_by_message_type(data) {
|
|||
}
|
||||
|
||||
function populate_number_of_users(data) {
|
||||
const weekly_rangeselector = make_rangeselector(
|
||||
{count: 2, label: $t({defaultMessage: "Last 2 months"}), step: "month"},
|
||||
{count: 6, label: $t({defaultMessage: "Last 6 months"}), step: "month"},
|
||||
);
|
||||
|
||||
const layout = {
|
||||
width: 750,
|
||||
height: 370,
|
||||
margin: {l: 40, r: 0, b: 65, t: 20},
|
||||
margin: {l: 40, r: 10, b: 40, t: 0},
|
||||
xaxis: {
|
||||
fixedrange: true,
|
||||
rangeslider: {bordercolor: "#D8D8D8", borderwidth: 1},
|
||||
rangeselector: {
|
||||
x: 0.64,
|
||||
y: -0.79,
|
||||
buttons: [
|
||||
{
|
||||
count: 2,
|
||||
label: $t({defaultMessage: "Last 2 months"}),
|
||||
step: "month",
|
||||
stepmode: "backward",
|
||||
},
|
||||
{
|
||||
count: 6,
|
||||
label: $t({defaultMessage: "Last 6 months"}),
|
||||
step: "month",
|
||||
stepmode: "backward",
|
||||
},
|
||||
{step: "all", label: $t({defaultMessage: "All time"})},
|
||||
],
|
||||
},
|
||||
rangeselector: weekly_rangeselector,
|
||||
tickangle: 0,
|
||||
},
|
||||
yaxis: {fixedrange: true, rangemode: "tozero"},
|
||||
|
|
@ -905,7 +889,7 @@ function populate_messages_read_over_time(data) {
|
|||
barmode: "group",
|
||||
width: 750,
|
||||
height: 400,
|
||||
margin: {l: 40, r: 0, b: 40, t: 0},
|
||||
margin: {l: 40, r: 10, b: 40, t: 0},
|
||||
xaxis: {
|
||||
fixedrange: true,
|
||||
rangeslider: {bordercolor: "#D8D8D8", borderwidth: 1},
|
||||
|
|
@ -922,28 +906,12 @@ function populate_messages_read_over_time(data) {
|
|||
font: font_12pt,
|
||||
};
|
||||
|
||||
function make_rangeselector(x, y, button1, button2) {
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
buttons: [
|
||||
{stepmode: "backward", ...button1},
|
||||
{stepmode: "backward", ...button2},
|
||||
{step: "all", label: $t({defaultMessage: "All time"})},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// This is also the cumulative rangeselector
|
||||
const daily_rangeselector = make_rangeselector(
|
||||
0.68,
|
||||
-0.62,
|
||||
{count: 10, label: $t({defaultMessage: "Last 10 days"}), step: "day"},
|
||||
{count: 30, label: $t({defaultMessage: "Last 30 days"}), step: "day"},
|
||||
);
|
||||
const weekly_rangeselector = make_rangeselector(
|
||||
0.656,
|
||||
-0.62,
|
||||
{count: 2, label: $t({defaultMessage: "Last 2 months"}), step: "month"},
|
||||
{count: 6, label: $t({defaultMessage: "Last 6 months"}), step: "month"},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ p {
|
|||
.button-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 5px;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
|
|
@ -97,14 +98,6 @@ p {
|
|||
font-size: 0.8em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
float: right;
|
||||
|
||||
button {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
|
|
@ -115,23 +108,16 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.button-active-users {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: "Source Sans 3", sans-serif !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
padding: 2px 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(0, 0%, 84%) !important;
|
||||
}
|
||||
|
||||
&[data-user="everyone"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.docs_link a {
|
||||
|
|
@ -198,6 +184,10 @@ p {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#pie_messages_sent_by_type_total {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#users_hover_info,
|
||||
#read_hover_info,
|
||||
#hoverinfo {
|
||||
|
|
@ -205,9 +195,9 @@ p {
|
|||
font-size: 0.8em;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
float: right;
|
||||
height: 0;
|
||||
top: -35px;
|
||||
left: 40px;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.spinner::before {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="chart-container">
|
||||
<h1>{{ _("Active users") }}</h1>
|
||||
<div class="button-container">
|
||||
<div class="buttons button-active-users">
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" id="1day_actives_button">{{ _("Daily actives") }}</button>
|
||||
<button class="button" type="button" id="15day_actives_button">{{ _("15 day actives") }}</button>
|
||||
<button class="button" type="button" id="all_time_actives_button">{{ _("Total users") }}</button>
|
||||
|
|
@ -55,13 +55,17 @@
|
|||
<div class="chart-container pie-chart">
|
||||
<div id="pie_messages_sent_by_type">
|
||||
<h1>{{ _("Messages sent by recipient type") }}</h1>
|
||||
<div class="button-container">
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" data-user="user">{{ _("Me") }}</button>
|
||||
<button class="button selected" type="button" data-user="everyone">{{ _("Everyone") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="id_messages_sent_by_message_type">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div id="pie_messages_sent_by_type_total" class="number-stat"></div>
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" data-user="user">{{ _("Me") }}</button>
|
||||
<button class="button selected" type="button" data-user="everyone">{{ _("Everyone") }}</button>
|
||||
<button class="button" type="button" data-time="week">{{ _("Last week") }}</button>
|
||||
<button class="button selected" type="button" data-time="month">{{ _("Last month") }}</button>
|
||||
<button class="button" type="button" data-time="year">{{ _("Last year") }}</button>
|
||||
|
|
@ -114,12 +118,16 @@
|
|||
<div class="chart-container pie-chart">
|
||||
<div id="pie_messages_sent_by_client">
|
||||
<h1>{{ _("Messages sent by client") }}</h1>
|
||||
<div class="button-container">
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" data-user="user">{{ _("Me") }}</button>
|
||||
<button class="button selected" type="button" data-user="everyone">{{ _("Everyone") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="id_messages_sent_by_client">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" data-user="user">{{ _("Me") }}</button>
|
||||
<button class="button selected" type="button" data-user="everyone">{{ _("Everyone") }}</button>
|
||||
<button class="button" type="button" data-time="week">{{ _("Last week") }}</button>
|
||||
<button class="button selected" type="button" data-time="month">{{ _("Last month") }}</button>
|
||||
<button class="button" type="button" data-time="year">{{ _("Last year") }}</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue