Skip to content
Snippets Groups Projects
Commit c8683f7c authored by Jan Mach's avatar Jan Mach
Browse files

Localized the timeline chart dataset tables. 

The timeline chart dataset tables now have localized header titles and numbers in the table are localized with Globalize. (Redmine issue: #4321)
parent b1849551
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Gruntfile.js
+ 46
− 5
View file @ c8683f7c
...@@ -70,10 +70,6 @@ module.exports = function(grunt) { ...@@ -70,10 +70,6 @@ module.exports = function(grunt) {
// --------------------------------------------------------------------- // ---------------------------------------------------------------------
// Running shell commands. // Running shell commands.
shell: { shell: {
// Update NodeJS packages (Grunt and grunt plugins).
npm_update: {
command: 'npm update'
},
// Install Yarn managed packages (web interface frontend packages). // Install Yarn managed packages (web interface frontend packages).
yarn_install: { yarn_install: {
command: 'yarn install' command: 'yarn install'
...@@ -287,6 +283,51 @@ module.exports = function(grunt) { ...@@ -287,6 +283,51 @@ module.exports = function(grunt) {
src: './*', src: './*',
dest: '<%= project_paths.web_static_dir %>vendor/bootstrap/js/' dest: '<%= project_paths.web_static_dir %>vendor/bootstrap/js/'
}, },
// ----- CLDRJS.
{
expand: true,
cwd: 'node_modules/cldrjs/dist/',
src: './cldr.js',
dest: '<%= project_paths.web_static_dir %>vendor/cldrjs'
},
{
expand: true,
cwd: 'node_modules/cldrjs/dist/cldr/',
src: './*.js',
dest: '<%= project_paths.web_static_dir %>vendor/cldrjs/cldr'
},
// ----- CLDR.
{
expand: true,
cwd: 'node_modules/cldr-data/main/cs/',
src: './*.json',
dest: '<%= project_paths.web_static_dir %>vendor/cldr/main/cs'
},
{
expand: true,
cwd: 'node_modules/cldr-data/main/en/',
src: './*.json',
dest: '<%= project_paths.web_static_dir %>vendor/cldr/main/en'
},
{
expand: true,
cwd: 'node_modules/cldr-data/supplemental/',
src: './*.json',
dest: '<%= project_paths.web_static_dir %>vendor/cldr/supplemental'
},
// ----- Globalize.
{
expand: true,
cwd: 'node_modules/globalize/dist/',
src: './globalize.js',
dest: '<%= project_paths.web_static_dir %>vendor/globalize'
},
{
expand: true,
cwd: 'node_modules/globalize/dist/globalize/',
src: './*.js',
dest: '<%= project_paths.web_static_dir %>vendor/globalize/globalize'
},
// ----- D3 // ----- D3
{ {
expand: true, expand: true,
...@@ -495,7 +536,7 @@ module.exports = function(grunt) { ...@@ -495,7 +536,7 @@ module.exports = function(grunt) {
); );
grunt.registerTask('update', grunt.registerTask('update',
'(RUN) Update internal NPM packages for build suite.', '(RUN) Update internal NPM packages for build suite.',
['shell:npm_update', 'shell:yarn_install'] ['shell:yarn_install', 'shell:yarn_upgrade']
); );
grunt.registerTask('webui', grunt.registerTask('webui',
'(RUN) Build and install web user interface dependencies.', '(RUN) Build and install web user interface dependencies.',
......
lib/hawat/blueprints/design/static/js/hawat-common-head.js
+ 29
− 14
View file @ c8683f7c
...@@ -74,7 +74,7 @@ function download_as_CSV(args) { ...@@ -74,7 +74,7 @@ function download_as_CSV(args) {
} }
// Render multi-timeline chart. // Render multi-timeline chart.
function render_chart_timeline_multi(chid, data_getter, params) { function render_chart_timeline_multi(chid, chart_data, params) {
//console.log('Rendering chart: ' + chid); //console.log('Rendering chart: ' + chid);
nv.addGraph(function() { nv.addGraph(function() {
...@@ -120,7 +120,7 @@ function render_chart_timeline_multi(chid, data_getter, params) { ...@@ -120,7 +120,7 @@ function render_chart_timeline_multi(chid, data_getter, params) {
// Select the appropriate SVG element and bind datum to the chart. // Select the appropriate SVG element and bind datum to the chart.
d3.select("#" + chid + " svg") d3.select("#" + chid + " svg")
.datum(data_getter()) .datum(chart_data)
.transition().duration(350) .transition().duration(350)
.call(chart); .call(chart);
...@@ -144,40 +144,55 @@ function table_header_color_scale() { ...@@ -144,40 +144,55 @@ function table_header_color_scale() {
}; };
} }
function table_value_formatter(formatter) {
var value_formatter = formatter;
return function(value) {
try {
return value_formatter(value);
}
catch(err) {
return value;
}
}
}
// Render multi-timeline table. // Render multi-timeline table.
function render_table_timeline_multi(tid, columns, data_getter, params) { function render_table_timeline_multi(tid, table_columns, table_data, params) {
//console.log('Rendering table: ' + tid); //console.log('Rendering table: ' + tid);
//var value_formatter = GLOBALIZER.numberFormatter()
var value_formatter = table_value_formatter(GLOBALIZER.numberFormatter());
var table = d3.select('#' + tid).append('table') var table = d3.select('#' + tid).append('table')
var thead = table.append('thead') var thead = table.append('thead')
var tbody = table.append('tbody'); var tbody = table.append('tbody');
table.attr('class', 'table table-bordered table-striped table-condensed') table.attr('class', 'table table-bordered table-striped table-condensed')
// append the header row // append the table header row
thead.append('tr') thead.append('tr')
.selectAll('th') .selectAll('th')
.data(columns).enter() .data(table_columns).enter()
.append('th') .append('th')
.style('background-color', table_header_color_scale()) .style('background-color', table_header_color_scale())
.text(function (column) { return column; }); .text(function (column) { return column.key; });
// create a row for each object in the data // create a table body row for each object in the data
var rows = tbody.selectAll('tr') var brows = tbody.selectAll('tr')
.data(data_getter) .data(table_data)
.enter() .enter()
.append('tr'); .append('tr');
// create a cell in each row for each column // create a cell in each table body row for each column
var cells = rows.selectAll('td') var bcells = brows.selectAll('td')
.data(function (row) { .data(function (row) {
return columns.map(function (column) { return table_columns.map(function (column) {
return {column: column, value: row[column]}; return {column: column.ident, value: row[column.ident]};
}); });
}) })
.enter() .enter()
.append('td') .append('td')
.text(function (d) { return d.value; }); .text(function (d) { return value_formatter(d.value); });
return table; return table;
} }
lib/hawat/blueprints/design/templates/_layout.html
+ 80
− 7
View file @ c8683f7c
...@@ -4,15 +4,26 @@ ...@@ -4,15 +4,26 @@
{%- import '_macros_chart.html' as macros_chart with context -%} {%- import '_macros_chart.html' as macros_chart with context -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!--
============================================================================
HEADER
============================================================================
-->
<head> <head>
{%- block head %} {%- block head %}
<!-- Required meta tags --> <!----------------------------------------------------------------------
Required meta tags
----------------------------------------------------------------------->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{%- block headcss %} {%- block headcss %}
<!----------------------------------------------------------------------
Head CSS
----------------------------------------------------------------------->
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="{{ url_for('design.static', filename='vendor/font-awesome/css/solid.css') }}"> <link rel="stylesheet" href="{{ url_for('design.static', filename='vendor/font-awesome/css/solid.css') }}">
<link rel="stylesheet" href="{{ url_for('design.static', filename='vendor/font-awesome/css/regular.css') }}"> <link rel="stylesheet" href="{{ url_for('design.static', filename='vendor/font-awesome/css/regular.css') }}">
...@@ -34,29 +45,91 @@ ...@@ -34,29 +45,91 @@
{%- block headjs %} {%- block headjs %}
<!-- Head JS --> <!----------------------------------------------------------------------
Head JS
----------------------------------------------------------------------->
<!-- Globalize's dependencies -->
<script src="{{ url_for('design.static', filename='vendor/cldrjs/cldr.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/cldrjs/cldr/event.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/cldrjs/cldr/supplemental.js') }}"></script>
<!-- Globalize -->
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize.js') }}"></script>
<!-- <script src="{{ url_for('design.static', filename='vendor/globalize/globalize/message.js') }}"></script> -->
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize/number.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize/plural.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize/date.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize/relative-time.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/globalize/globalize/unit.js') }}"></script>
<!-- Moment.js -->
<script src="{{ url_for('design.static', filename='vendor/moment/js/moment-with-locales.min.js') }}"></script> <script src="{{ url_for('design.static', filename='vendor/moment/js/moment-with-locales.min.js') }}"></script>
<!-- jQuery -->
<script src="{{ url_for('design.static', filename='vendor/jquery/js/jquery.min.js') }}"></script> <script src="{{ url_for('design.static', filename='vendor/jquery/js/jquery.min.js') }}"></script>
<!-- D3 and NVD3 chart libraries -->
<script src="{{ url_for('design.static', filename='vendor/d3/js/d3.min.js') }}"></script> <script src="{{ url_for('design.static', filename='vendor/d3/js/d3.min.js') }}"></script>
<script src="{{ url_for('design.static', filename='vendor/nvd3/js/nv.d3.min.js') }}"></script> <script src="{{ url_for('design.static', filename='vendor/nvd3/js/nv.d3.min.js') }}"></script>
<script src="{{ url_for('design.static', filename='js/hawat-common-head.js') }}"></script>
<!-- Localization initializations -->
<script> <script>
// These global variables must be defined here to bypass browser caching, // These global variables must be defined here to bypass browser caching,
// they might cahnge with each request. // they might change with each request.
GLOBAL_LOCALE = "{{ session['locale'] }}" var GLOBAL_LOCALE = "{{ session['locale'] }}"
GLOBAL_TIMEZONE = "{{ session['timezone'] }}" var GLOBAL_TIMEZONE = "{{ session['timezone'] }}"
var GLOBALIZER;
$.when(
// List of CLDRs required by Globalize. The appropriate list can
// be generated here:
// http://johnnyreilly.github.io/globalize-so-what-cha-want/#/?currency=true&date=true&message=true&number=true&plural=true&relativeTime=true&unit=true
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/likelySubtags.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/main/' + session['locale'] + '/numbers.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/numberingSystems.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/main/' + session['locale'] + '/ca-gregorian.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/main/' + session['locale'] + '/timeZoneNames.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/timeData.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/weekData.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/plurals.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/supplemental/ordinals.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/main/' + session['locale'] + '/dateFields.json') }}" ),
$.get( "{{ url_for('design.static', filename='vendor/cldr/main/' + session['locale'] + '/units.json') }}" )
).then(function() {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
return result[ 0 ];
});
}).then( Globalize.load ).then(function() {
// Initialize Globalizer.
GLOBALIZER = Globalize("{{ session['locale'] }}");
});
</script> </script>
<!-- Custom libraries -->
<script src="{{ url_for('design.static', filename='js/hawat-common-head.js') }}"></script>
{%- endblock headjs %} {%- endblock headjs %}
<!-- Favicon --> <!----------------------------------------------------------------------
Page metadata
----------------------------------------------------------------------->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<title>{% block title %}{{ hawat_current_view.get_view_title() }}{% endblock %} - Mentat</title> <title>{% block title %}{{ hawat_current_view.get_view_title() }}{% endblock %} - Mentat</title>
{%- endblock head %} {%- endblock head %}
</head> </head>
<!--
============================================================================
BODY
============================================================================
-->
<body> <body>
{%- block body %} {%- block body %}
......
lib/hawat/blueprints/design/templates/_macros_chart.html
+ 20
− 16
View file @ c8683f7c
...@@ -194,26 +194,30 @@ ...@@ -194,26 +194,30 @@
{%- macro render_chart_snippet_rndchart(chid_full) %} {%- macro render_chart_snippet_rndchart(chid_full) %}
// Render the timeline chart '{{ chid_full }}'. // Render the timeline chart '{{ chid_full }}'.
render_chart_timeline_multi( $(document).ready(function () {
'{{ chid_full }}_chart', render_chart_timeline_multi(
getdata_{{ chid_full }}_chart, '{{ chid_full }}_chart',
{ getdata_{{ chid_full }}_chart(),
'xlabel': '{{ _("Date") }}', {
'ylabel': '{{ _("Count [#]") }}' 'xlabel': '{{ _("Date") }}',
} 'ylabel': '{{ _("Count [#]") }}'
); }
);
});
{%- endmacro %} {%- endmacro %}
{%- macro render_chart_snippet_rndtable(chid_full) %} {%- macro render_chart_snippet_rndtable(chid_full) %}
// Render the timeline table '{{ chid_full }}'. // Render the timeline table '{{ chid_full }}'.
var dataset_{{ chid_full }} = getdata_{{ chid_full }}_chart() $(document).ready(function () {
render_table_timeline_multi( var dataset_{{ chid_full }} = getdata_{{ chid_full }}_chart()
'{{ chid_full }}_table', render_table_timeline_multi(
['{{ _("date") }}'].concat(dataset_{{ chid_full }}.map(function(d) { '{{ chid_full }}_table',
return d.ident; [{'ident': 'date', 'key': '{{ _("Date") }}'}].concat(dataset_{{ chid_full }}.map(function(d) {
})), return {'ident': d.ident, 'key': d.key};
getdata_{{ chid_full }}_table })),
); getdata_{{ chid_full }}_table()
);
});
{%- endmacro %} {%- endmacro %}
{%- macro render_chart_snippet_eventcbks(chid_full) %} {%- macro render_chart_snippet_eventcbks(chid_full) %}
......
package-lock.json deleted 100644 → 0
+ 0
− 3555
View file @ b1849551
This diff is collapsed.
yarn.lock
+ 223
− 85
View file @ c8683f7c
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment