| @@ -163,9 +163,9 @@ | ||
| 163 | 163 | }); |
| 164 | 164 | |
| 165 | 165 | _this.$el.find('.'+_this.htmlClassPrefix+'toggle-hidden-option').on('change', function () { |
| 166 | 166 | // var animationOptions = _this.$el.find('.'+_this.htmlClassPrefix+'hidden-options-section'); |
| 167 | - var currentSettings = $(this).parents('.' + _this.htmlClassPrefix + 'settings-data-main-wrap') | |
| 167 | + var currentSettings = $(this).parents('.' + _this.htmlClassPrefix + 'settings-data-main-wrap'); | |
| 168 | 168 | var hiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'hidden-options-section'); |
| 169 | 169 | var notHiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'not-hidden-options-section'); |
| 170 | 170 | |
| 171 | 171 | if ($(this).is(':checked')) { |
| @@ -183,8 +183,9 @@ | ||
| 183 | 183 | }); |
| 184 | 184 | |
| 185 | 185 | _this.$el.on("click", '.'+_this.htmlClassPrefix+'charts-change-type-type', function(){ |
| 186 | 186 | _this.chartType = $(this).attr('data-type'); |
| 187 | + _this.configureOptions(); | |
| 187 | 188 | _this.changeChartType(); |
| 188 | 189 | _this.$el.find('.'+_this.htmlClassPrefix+'charts-change-type-type').css('backgroundColor', '#e7e7e7'); |
| 189 | 190 | $(this).css('backgroundColor', '#008cff63'); |
| 190 | 191 | }); |
| @@ -297,18 +298,61 @@ | ||
| 297 | 298 | } |
| 298 | 299 | }); |
| 299 | 300 | |
| 300 | 301 | _this.$el.find('#'+_this.htmlClassPrefix+'option-border-width').on('input', function () { |
| 301 | - _this.chartOptions.backgroundColor.strokeWidth = $(this).val(); | |
| 302 | - _this.chartSourceData.settings.border_width = _this.chartOptions.backgroundColor.strokeWidth; | |
| 302 | + _this.chartSourceData.settings.border_width = $(this).val(); | |
| 303 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-width', $(this).val() + 'px'); | |
| 303 | 304 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 304 | 305 | }); |
| 305 | 306 | |
| 307 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-color').on('input', function () { | |
| 308 | + _this.chartSourceData.settings.border_color = $(this).val(); | |
| 309 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-color', $(this).val()); | |
| 310 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 311 | + }); | |
| 312 | + | |
| 306 | 313 | _this.$el.find('#'+_this.htmlClassPrefix+'option-border-radius').on('input', function () { |
| 314 | + _this.chartSourceData.settings.border_radius = $(this).val(); | |
| 307 | 315 | _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-radius', $(this).val() + 'px'); |
| 308 | 316 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 309 | 317 | }); |
| 318 | + | |
| 319 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-style').on('change', function () { | |
| 320 | + _this.chartSourceData.settings.border_style = $(this).val(); | |
| 321 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-style', $(this).val()); | |
| 322 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 323 | + }); | |
| 324 | + | |
| 325 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-width-with-title').on('input', function () { | |
| 326 | + _this.chartSourceData.settings.border_width_with_title = $(this).val(); | |
| 327 | + _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-width', $(this).val() + 'px'); | |
| 328 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 329 | + }); | |
| 310 | 330 | |
| 331 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-radius-with-title').on('input', function () { | |
| 332 | + _this.chartSourceData.settings.border_radius_with_title = $(this).val(); | |
| 333 | + _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-radius', $(this).val() + 'px'); | |
| 334 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 335 | + }); | |
| 336 | + | |
| 337 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-color-with-title').on('input', function () { | |
| 338 | + _this.chartSourceData.settings.border_color_with_title = $(this).val(); | |
| 339 | + _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-color', $(this).val()); | |
| 340 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 341 | + }); | |
| 342 | + | |
| 343 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-style-with-title').on('change', function () { | |
| 344 | + _this.chartSourceData.settings.border_style_with_title = $(this).val(); | |
| 345 | + _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-style', $(this).val()); | |
| 346 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 347 | + }); | |
| 348 | + | |
| 349 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-padding-outer').on('input', function () { | |
| 350 | + _this.chartSourceData.settings.padding_outer = $(this).val(); | |
| 351 | + _this.$el.find('.'+_this.htmlClassPrefix+'container').css('padding', $(this).val() + 'px'); | |
| 352 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 353 | + }); | |
| 354 | + | |
| 311 | 355 | _this.$el.find('#'+_this.htmlClassPrefix+'option-chart-border-width').on('input', function () { |
| 312 | 356 | _this.chartOptions.chartArea.backgroundColor.strokeWidth = $(this).val(); |
| 313 | 357 | _this.chartSourceData.settings.chart_border_width = _this.chartOptions.chartArea.backgroundColor.strokeWidth; |
| 314 | 358 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -313,14 +357,8 @@ | ||
| 313 | 357 | _this.chartSourceData.settings.chart_border_width = _this.chartOptions.chartArea.backgroundColor.strokeWidth; |
| 314 | 358 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 315 | 359 | }); |
| 316 | 360 | |
| 317 | - _this.$el.find('#'+_this.htmlClassPrefix+'option-border-color').on('input', function () { | |
| 318 | - _this.chartOptions.backgroundColor.stroke = $(this).val(); | |
| 319 | - _this.chartSourceData.settings.border_color = _this.chartOptions.backgroundColor.stroke; | |
| 320 | - _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 321 | - }); | |
| 322 | - | |
| 323 | 361 | _this.$el.find('#'+_this.htmlClassPrefix+'option-chart-border-color').on('input', function () { |
| 324 | 362 | _this.chartOptions.chartArea.backgroundColor.stroke = $(this).val(); |
| 325 | 363 | _this.chartSourceData.settings.chart_border_color = _this.chartOptions.chartArea.backgroundColor.stroke; |
| 326 | 364 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -329,9 +367,9 @@ | ||
| 329 | 367 | _this.$el.find('#'+_this.htmlClassPrefix+'option-box-shadow').on('change', function () { |
| 330 | 368 | if ($(this).is(':checked')) { |
| 331 | 369 | _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', '2px 2px 10px 2px ' + _this.chartSourceData.settings.border_color); |
| 332 | 370 | } else { |
| 333 | - _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', ''); | |
| 371 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', 'unset'); | |
| 334 | 372 | } |
| 335 | 373 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 336 | 374 | }); |
| 337 | 375 | |
| @@ -509,12 +547,23 @@ | ||
| 509 | 547 | }); |
| 510 | 548 | |
| 511 | 549 | _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-format').on('change', function () { |
| 512 | 550 | _this.chartOptions.hAxis.format = $(this).val(); |
| 551 | + if(_this.chartOptions.hAxis.format == 'percent'){ | |
| 552 | + _this.$el.find('.option-haxis-enable-divide-percent').show(300); | |
| 553 | + }else{ | |
| 554 | + _this.$el.find('.option-haxis-enable-divide-percent').hide(300); | |
| 555 | + } | |
| 513 | 556 | _this.chartSourceData.settings.haxis_format = _this.chartOptions.hAxis.format; |
| 514 | 557 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 515 | 558 | }); |
| 516 | 559 | |
| 560 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-enable-divide-percent').on('input', function () { | |
| 561 | + _this.chartOptions.hAxis.enableDividePercent = $(this).is(':checked'); | |
| 562 | + _this.chartSourceData.settings.haxis_enable_divide_percent = _this.chartOptions.hAxis.enableDividePercent ? 'checked' : ''; | |
| 563 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 564 | + }); | |
| 565 | + | |
| 517 | 566 | _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-label-font-size').on('input', function () { |
| 518 | 567 | _this.chartOptions.hAxis.titleTextStyle.fontSize = $(this).val(); |
| 519 | 568 | _this.chartSourceData.settings.haxis_label_font_size = _this.chartOptions.hAxis.titleTextStyle.fontSize; |
| 520 | 569 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -618,12 +667,23 @@ | ||
| 618 | 667 | }); |
| 619 | 668 | |
| 620 | 669 | _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-format').on('change', function () { |
| 621 | 670 | _this.chartOptions.vAxis.format = $(this).val(); |
| 671 | + if(_this.chartOptions.vAxis.format == 'percent'){ | |
| 672 | + _this.$el.find('.option-vaxis-enable-divide-percent').show(300); | |
| 673 | + }else{ | |
| 674 | + _this.$el.find('.option-vaxis-enable-divide-percent').hide(300); | |
| 675 | + } | |
| 622 | 676 | _this.chartSourceData.settings.vaxis_format = _this.chartOptions.vAxis.format; |
| 623 | 677 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 624 | 678 | }); |
| 625 | 679 | |
| 680 | + | |
| 681 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-enable-divide-percent').on('input', function () { | |
| 682 | + _this.chartOptions.vAxis.enableDividePercent = $(this).is(':checked'); | |
| 683 | + _this.chartSourceData.settings.vaxis_enable_divide_percent = _this.chartOptions.vaxis.enableDividePercent ? 'checked' : ''; | |
| 684 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 685 | + }); | |
| 626 | 686 | _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-label-font-size').on('input', function () { |
| 627 | 687 | _this.chartOptions.vAxis.titleTextStyle.fontSize = $(this).val(); |
| 628 | 688 | _this.chartSourceData.settings.vaxis_label_font_size = _this.chartOptions.vAxis.titleTextStyle.fontSize; |
| 629 | 689 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -688,8 +748,153 @@ | ||
| 688 | 748 | _this.chartSourceData.settings.vaxis_minor_gridlines_color = _this.chartOptions.vAxis.minorGridlines.color; |
| 689 | 749 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 690 | 750 | }); |
| 691 | 751 | |
| 752 | + //title | |
| 753 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-gap').on('input', function () { | |
| 754 | + _this.chartSourceData.settings.title_gap = $(this).val(); | |
| 755 | + _this.$el.find('.'+_this.htmlClassPrefix+'header-container').attr('style', 'margin-bottom: ' + $(this).val() + 'px' + ' !important;'); | |
| 756 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 757 | + }); | |
| 758 | + | |
| 759 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-color').on('input', function () { | |
| 760 | + _this.chartSourceData.settings.title_color = $(this).val(); | |
| 761 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('color', $(this).val()); | |
| 762 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 763 | + }); | |
| 764 | + | |
| 765 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-font-size').on('input', function () { | |
| 766 | + _this.chartSourceData.settings.title_font_size = $(this).val(); | |
| 767 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-size', $(this).val() + 'px'); | |
| 768 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 769 | + }); | |
| 770 | + | |
| 771 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-bold').on('change', function () { | |
| 772 | + _this.chartSourceData.settings.title_bold = $(this).is(':checked') ? 'checked' : ''; | |
| 773 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-weight', $(this).is(':checked') ? 'bold' : 'normal'); | |
| 774 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 775 | + }); | |
| 776 | + | |
| 777 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-italic').on('change', function () { | |
| 778 | + _this.chartSourceData.settings.title_italic = $(this).is(':checked') ? 'checked' : ''; | |
| 779 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-style', $(this).is(':checked') ? 'italic' : 'normal'); | |
| 780 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 781 | + }); | |
| 782 | + | |
| 783 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-shadow').on('change', function () { | |
| 784 | + if ($(this).is(':checked')) { | |
| 785 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', '2px 2px 5px ' + _this.chartSourceData.settings.title_shadow_color); | |
| 786 | + } else { | |
| 787 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', 'unset'); | |
| 788 | + } | |
| 789 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 790 | + }); | |
| 791 | + | |
| 792 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-shadow-color').on('input', function () { | |
| 793 | + if (_this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-shadow').is(':checked')) { | |
| 794 | + _this.chartSourceData.settings.title_shadow_color = $(this).val(); | |
| 795 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', '2px 2px 5px ' + $(this).val()); | |
| 796 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 797 | + } | |
| 798 | + }); | |
| 799 | + | |
| 800 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-position').on('change', function () { | |
| 801 | + _this.chartSourceData.settings.title_position = $(this).val(); | |
| 802 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-align', $(this).val()); | |
| 803 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 804 | + }); | |
| 805 | + | |
| 806 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-transform').on('change', function () { | |
| 807 | + _this.chartSourceData.settings.title_transform = $(this).val(); | |
| 808 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-transform', $(this).val()); | |
| 809 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 810 | + }); | |
| 811 | + | |
| 812 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-decoration').on('change', function () { | |
| 813 | + _this.chartSourceData.settings.title_decoration = $(this).val(); | |
| 814 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-decoration', $(this).val()); | |
| 815 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 816 | + }); | |
| 817 | + | |
| 818 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-letter-spacing').on('input', function () { | |
| 819 | + _this.chartSourceData.settings.title_letter_spacing = $(this).val(); | |
| 820 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('letter-spacing', $(this).val() + 'px'); | |
| 821 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 822 | + }); | |
| 823 | + | |
| 824 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-gap-description').on('input', function () { | |
| 825 | + _this.chartSourceData.settings.title_gap_description = $(this).val(); | |
| 826 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('margin-bottom', $(this).val() + 'px'); | |
| 827 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 828 | + }); | |
| 829 | + | |
| 830 | + //description | |
| 831 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-color').on('input', function () { | |
| 832 | + _this.chartSourceData.settings.description_color = $(this).val(); | |
| 833 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('color', $(this).val()); | |
| 834 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 835 | + }); | |
| 836 | + | |
| 837 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-font-size').on('input', function () { | |
| 838 | + _this.chartSourceData.settings.description_font_size = $(this).val(); | |
| 839 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-size', $(this).val() + 'px'); | |
| 840 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 841 | + }); | |
| 842 | + | |
| 843 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-bold').on('change', function () { | |
| 844 | + _this.chartSourceData.settings.description_bold = $(this).is(':checked') ? 'checked' : ''; | |
| 845 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-weight', $(this).is(':checked') ? 'bold' : 'normal'); | |
| 846 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 847 | + }); | |
| 848 | + | |
| 849 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-italic').on('change', function () { | |
| 850 | + _this.chartSourceData.settings.description_italic = $(this).is(':checked') ? 'checked' : ''; | |
| 851 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-style', $(this).is(':checked') ? 'italic' : 'normal'); | |
| 852 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 853 | + }); | |
| 854 | + | |
| 855 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-shadow').on('change', function () { | |
| 856 | + if ($(this).is(':checked')) { | |
| 857 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', '2px 2px 5px ' + _this.chartSourceData.settings.description_shadow_color); | |
| 858 | + } else { | |
| 859 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', 'unset'); | |
| 860 | + } | |
| 861 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 862 | + }); | |
| 863 | + | |
| 864 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-shadow-color').on('input', function () { | |
| 865 | + if (_this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-shadow').is(':checked')) { | |
| 866 | + _this.chartSourceData.settings.description_shadow_color = $(this).val(); | |
| 867 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', '2px 2px 5px ' + $(this).val()); | |
| 868 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 869 | + } | |
| 870 | + }); | |
| 871 | + | |
| 872 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-position').on('change', function () { | |
| 873 | + _this.chartSourceData.settings.description_position = $(this).val(); | |
| 874 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-align', $(this).val()); | |
| 875 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 876 | + }); | |
| 877 | + | |
| 878 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-transform').on('change', function () { | |
| 879 | + _this.chartSourceData.settings.description_transform = $(this).val(); | |
| 880 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-transform', $(this).val()); | |
| 881 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 882 | + }); | |
| 883 | + | |
| 884 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-decoration').on('change', function () { | |
| 885 | + _this.chartSourceData.settings.description_decoration = $(this).val(); | |
| 886 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-decoration', $(this).val()); | |
| 887 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 888 | + }); | |
| 889 | + | |
| 890 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-letter-spacing').on('input', function () { | |
| 891 | + _this.chartSourceData.settings.description_letter_spacing = $(this).val(); | |
| 892 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('letter-spacing', $(this).val() + 'px'); | |
| 893 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 894 | + }); | |
| 895 | + | |
| 896 | + | |
| 692 | 897 | // animation settings |
| 693 | 898 | _this.$el.find('#'+_this.htmlClassPrefix+'option-enable-animation').on('change', function () { |
| 694 | 899 | if ($(this).is(':checked')) { |
| 695 | 900 | _this.chartOptions.animation = { |
| @@ -980,9 +1185,9 @@ | ||
| 980 | 1185 | _this.setOrgChartCustomStyles(); |
| 981 | 1186 | } |
| 982 | 1187 | }); |
| 983 | 1188 | |
| 984 | - _this.$el.find('#'+_this.htmlClassPrefix+'option-org-seslected-classname').on('input', function () { | |
| 1189 | + _this.$el.find('#'+_this.htmlClassPrefix+'option-org-selected-classname').on('input', function () { | |
| 985 | 1190 | _this.chartOptions.selectedNodeClass = $(this).val(); |
| 986 | 1191 | _this.chartSourceData.settings.org_selected_classname = _this.chartOptions.selectedNodeClass; |
| 987 | 1192 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 988 | 1193 | }); |
| @@ -1044,8 +1249,16 @@ | ||
| 1044 | 1249 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 1045 | 1250 | } |
| 1046 | 1251 | }); |
| 1047 | 1252 | |
| 1253 | + _this.$el.find('.'+_this.htmlClassPrefix+'option-series-format').on('input', function () { | |
| 1254 | + // if (!_this.$el.find('#'+_this.htmlClassPrefix+'option-enable-row-settings').is(':checked')) { | |
| 1255 | + var id = $(this).attr('data-series-id'); | |
| 1256 | + _this.chartSourceData.settings.series_format[id] = $(this).val(); | |
| 1257 | + _this.drawChartFunction(_this.chartData, _this.chartOptions); | |
| 1258 | + // } | |
| 1259 | + }); | |
| 1260 | + | |
| 1048 | 1261 | _this.$el.find('.'+_this.htmlClassPrefix+'option-series-visible-in-legend').on('input', function () { |
| 1049 | 1262 | if (_this.chartSourceData.source[0].length > 2) { |
| 1050 | 1263 | var id = $(this).attr('data-series-id'); |
| 1051 | 1264 | _this.chartOptions.series[id].visibleInLegend = $(this).is(':checked'); |
| @@ -1350,10 +1563,12 @@ | ||
| 1350 | 1563 | |
| 1351 | 1564 | var settings = _this.chartSourceData.settings; |
| 1352 | 1565 | var nSettings = _this.configOptionsForCharts(settings); |
| 1353 | 1566 | |
| 1567 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 1568 | + | |
| 1354 | 1569 | /* == Google part == */ |
| 1355 | - google.charts.load('current', {'packages':['corechart']}); | |
| 1570 | + google.charts.load('current', {'packages':['corechart'], 'language': userLocale}); | |
| 1356 | 1571 | google.charts.setOnLoadCallback(drawChart); |
| 1357 | 1572 | |
| 1358 | 1573 | function drawChart() { |
| 1359 | 1574 | _this.chartData = isChangedType ? _this.chartData : google.visualization.arrayToDataTable( dataTypes ); |
| @@ -1367,10 +1582,10 @@ | ||
| 1367 | 1582 | bottom: nSettings.chartBottomMargin, |
| 1368 | 1583 | }, |
| 1369 | 1584 | backgroundColor: { |
| 1370 | 1585 | fill: nSettings.backgroundColor, |
| 1371 | - strokeWidth: nSettings.borderWidth, | |
| 1372 | - stroke: nSettings.borderColor | |
| 1586 | + // strokeWidth: nSettings.borderWidth, | |
| 1587 | + // stroke: nSettings.borderColor | |
| 1373 | 1588 | }, |
| 1374 | 1589 | enableInteractivity: nSettings.enableInteractivity, |
| 1375 | 1590 | legend: { |
| 1376 | 1591 | position: nSettings.legendPosition, |
| @@ -1416,8 +1631,12 @@ | ||
| 1416 | 1631 | _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) ); |
| 1417 | 1632 | |
| 1418 | 1633 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1419 | 1634 | _this.resizeChart(); |
| 1635 | + // Fix ARIA attributes for accessibility compliance | |
| 1636 | + setTimeout(function() { | |
| 1637 | + _this.fixAriaAttributes(); | |
| 1638 | + }, 100); | |
| 1420 | 1639 | } |
| 1421 | 1640 | /* */ |
| 1422 | 1641 | } |
| 1423 | 1642 | |
| @@ -1429,10 +1648,12 @@ | ||
| 1429 | 1648 | |
| 1430 | 1649 | var settings = _this.chartSourceData.settings; |
| 1431 | 1650 | var nSettings = _this.configOptionsForCharts(settings); |
| 1432 | 1651 | |
| 1652 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 1653 | + | |
| 1433 | 1654 | /* == Google part == */ |
| 1434 | - google.charts.load('current', {'packages':['corechart']}); | |
| 1655 | + google.charts.load('current', {'packages':['corechart'], 'language': userLocale}); | |
| 1435 | 1656 | google.charts.setOnLoadCallback(drawChart); |
| 1436 | 1657 | |
| 1437 | 1658 | function drawChart() { |
| 1438 | 1659 | dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes; |
| @@ -1442,10 +1663,10 @@ | ||
| 1442 | 1663 | _this.chartOptions = { |
| 1443 | 1664 | fontSize: nSettings.chartFontSize, |
| 1444 | 1665 | backgroundColor: { |
| 1445 | 1666 | fill: nSettings.backgroundColor, |
| 1446 | - strokeWidth: nSettings.borderWidth, | |
| 1447 | - stroke: nSettings.borderColor | |
| 1667 | + // strokeWidth: nSettings.borderWidth, | |
| 1668 | + // stroke: nSettings.borderColor | |
| 1448 | 1669 | }, |
| 1449 | 1670 | chartArea: { |
| 1450 | 1671 | backgroundColor: { |
| 1451 | 1672 | fill: nSettings.chartBackgroundColor, |
| @@ -1561,16 +1782,56 @@ | ||
| 1561 | 1782 | if (nSettings.enableAnimation) { |
| 1562 | 1783 | _this.chartOptions.animation = { |
| 1563 | 1784 | startup: nSettings.animationStartup, |
| 1564 | 1785 | duration: nSettings.animationDuration, |
| 1565 | - easing: nSettings.animationEasing, | |
| 1786 | + easing: nSettings.animationEasing, | |
| 1566 | 1787 | } |
| 1567 | 1788 | } |
| 1568 | - | |
| 1789 | + if(!isChangedType){ | |
| 1790 | + if(_this.chartOptions.hAxis.format == 'percent' && nSettings.hAxisEnableDividePercent){ | |
| 1791 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 1792 | + nSettings.seriesFormat[i] = '#%'; | |
| 1793 | + } | |
| 1794 | + | |
| 1795 | + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) { | |
| 1796 | + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) { | |
| 1797 | + var value = _this.chartData.getValue(row, col); | |
| 1798 | + if (typeof value === 'number' && !isNaN(value)) { | |
| 1799 | + | |
| 1800 | + var updatedValue = value / 100; | |
| 1801 | + _this.chartData.setValue(row, col, updatedValue); | |
| 1802 | + } | |
| 1803 | + } | |
| 1804 | + } | |
| 1805 | + | |
| 1806 | + }else { | |
| 1807 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 1808 | + if (nSettings.seriesFormat[i] === '#%') { | |
| 1809 | + nSettings.seriesFormat[i] = ''; | |
| 1810 | + } | |
| 1811 | + } | |
| 1812 | + } | |
| 1813 | + } | |
| 1814 | + | |
| 1815 | + for (var i = 1; i < dataTypes[0].length; i++) { | |
| 1816 | + | |
| 1817 | + if (nSettings.seriesFormat[i - 1]) { | |
| 1818 | + var formatter = new google.visualization.NumberFormat({ | |
| 1819 | + pattern: nSettings.seriesFormat[i - 1] | |
| 1820 | + }); | |
| 1821 | + formatter.format(_this.chartData, i); | |
| 1822 | + } | |
| 1823 | + | |
| 1824 | + | |
| 1825 | + } | |
| 1569 | 1826 | _this.chartObj = new google.visualization.BarChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1570 | 1827 | |
| 1571 | 1828 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1572 | 1829 | _this.resizeChart(); |
| 1830 | + // Fix ARIA attributes for accessibility compliance | |
| 1831 | + setTimeout(function() { | |
| 1832 | + _this.fixAriaAttributes(); | |
| 1833 | + }, 100); | |
| 1573 | 1834 | } |
| 1574 | 1835 | /* */ |
| 1575 | 1836 | } |
| 1576 | 1837 | |
| @@ -1583,10 +1844,12 @@ | ||
| 1583 | 1844 | |
| 1584 | 1845 | var settings = _this.chartSourceData.settings; |
| 1585 | 1846 | var nSettings = _this.configOptionsForCharts(settings); |
| 1586 | 1847 | |
| 1848 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 1849 | + | |
| 1587 | 1850 | /* == Google part == */ |
| 1588 | - google.charts.load('current', {'packages':['corechart']}); | |
| 1851 | + google.charts.load('current', {'packages':['corechart'], 'language': userLocale}); | |
| 1589 | 1852 | google.charts.setOnLoadCallback(drawChart); |
| 1590 | 1853 | |
| 1591 | 1854 | function drawChart() { |
| 1592 | 1855 | dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes; |
| @@ -1596,10 +1859,10 @@ | ||
| 1596 | 1859 | _this.chartOptions = { |
| 1597 | 1860 | fontSize: nSettings.chartFontSize, |
| 1598 | 1861 | backgroundColor: { |
| 1599 | 1862 | fill: nSettings.backgroundColor, |
| 1600 | - strokeWidth: nSettings.borderWidth, | |
| 1601 | - stroke: nSettings.borderColor | |
| 1863 | + // strokeWidth: nSettings.borderWidth, | |
| 1864 | + // stroke: nSettings.borderColor | |
| 1602 | 1865 | }, |
| 1603 | 1866 | chartArea: { |
| 1604 | 1867 | backgroundColor: { |
| 1605 | 1868 | fill: nSettings.chartBackgroundColor, |
| @@ -1719,13 +1982,48 @@ | ||
| 1719 | 1982 | duration: nSettings.animationDuration, |
| 1720 | 1983 | easing: nSettings.animationEasing, |
| 1721 | 1984 | } |
| 1722 | 1985 | } |
| 1723 | - | |
| 1986 | + if(!isChangedType){ | |
| 1987 | + if(_this.chartOptions.vAxis.format == 'percent' && nSettings.vAxisEnableDividePercent){ | |
| 1988 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 1989 | + nSettings.seriesFormat[i] = '#%'; | |
| 1990 | + } | |
| 1991 | + | |
| 1992 | + | |
| 1993 | + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) { | |
| 1994 | + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) { | |
| 1995 | + var value = _this.chartData.getValue(row, col); | |
| 1996 | + if (typeof value === 'number' && !isNaN(value)) { | |
| 1997 | + var updatedValue = value / 100; | |
| 1998 | + _this.chartData.setValue(row, col, updatedValue); | |
| 1999 | + } | |
| 2000 | + } | |
| 2001 | + } | |
| 2002 | + }else { | |
| 2003 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 2004 | + if (nSettings.seriesFormat[i] === '#%') { | |
| 2005 | + nSettings.seriesFormat[i] = ''; | |
| 2006 | + } | |
| 2007 | + } | |
| 2008 | + } | |
| 2009 | + } | |
| 2010 | + for (var i = 1; i < dataTypes[0].length; i++) { | |
| 2011 | + if (nSettings.seriesFormat[i - 1]) { | |
| 2012 | + var formatter = new google.visualization.NumberFormat({ | |
| 2013 | + pattern: nSettings.seriesFormat[i - 1] | |
| 2014 | + }); | |
| 2015 | + formatter.format(_this.chartData, i); | |
| 2016 | + } | |
| 2017 | + } | |
| 1724 | 2018 | _this.chartObj = new google.visualization.ColumnChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1725 | 2019 | |
| 1726 | 2020 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1727 | 2021 | _this.resizeChart(); |
| 2022 | + // Fix ARIA attributes for accessibility compliance | |
| 2023 | + setTimeout(function() { | |
| 2024 | + _this.fixAriaAttributes(); | |
| 2025 | + }, 100); | |
| 1728 | 2026 | } |
| 1729 | 2027 | /* */ |
| 1730 | 2028 | } |
| 1731 | 2029 | |
| @@ -1737,10 +2035,12 @@ | ||
| 1737 | 2035 | |
| 1738 | 2036 | var settings = _this.chartSourceData.settings; |
| 1739 | 2037 | var nSettings = _this.configOptionsForCharts(settings); |
| 1740 | 2038 | |
| 2039 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 2040 | + | |
| 1741 | 2041 | /* == Google part == */ |
| 1742 | - google.charts.load('current', {'packages':['corechart']}); | |
| 2042 | + google.charts.load('current', {'packages':['corechart'], 'language': userLocale}); | |
| 1743 | 2043 | google.charts.setOnLoadCallback(drawChart); |
| 1744 | 2044 | |
| 1745 | 2045 | function drawChart() { |
| 1746 | 2046 | dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes; |
| @@ -1750,10 +2050,10 @@ | ||
| 1750 | 2050 | _this.chartOptions = { |
| 1751 | 2051 | fontSize: nSettings.chartFontSize, |
| 1752 | 2052 | backgroundColor: { |
| 1753 | 2053 | fill: nSettings.backgroundColor, |
| 1754 | - strokeWidth: nSettings.borderWidth, | |
| 1755 | - stroke: nSettings.borderColor | |
| 2054 | + // strokeWidth: nSettings.borderWidth, | |
| 2055 | + // stroke: nSettings.borderColor | |
| 1756 | 2056 | }, |
| 1757 | 2057 | chartArea: { |
| 1758 | 2058 | backgroundColor: { |
| 1759 | 2059 | fill: nSettings.chartBackgroundColor, |
| @@ -1886,12 +2186,51 @@ | ||
| 1886 | 2186 | easing: nSettings.animationEasing, |
| 1887 | 2187 | } |
| 1888 | 2188 | } |
| 1889 | 2189 | |
| 2190 | + if(!isChangedType){ | |
| 2191 | + if(_this.chartOptions.vAxis.format == 'percent' && nSettings.vAxisEnableDividePercent){ | |
| 2192 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 2193 | + nSettings.seriesFormat[i] = '#%'; | |
| 2194 | + | |
| 2195 | + } | |
| 2196 | + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) { | |
| 2197 | + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) { | |
| 2198 | + var value = _this.chartData.getValue(row, col); | |
| 2199 | + if (typeof value === 'number' && !isNaN(value)) { | |
| 2200 | + var updatedValue = value / 100; | |
| 2201 | + _this.chartData.setValue(row, col, updatedValue); | |
| 2202 | + } | |
| 2203 | + } | |
| 2204 | + } | |
| 2205 | + | |
| 2206 | + }else { | |
| 2207 | + for (var i = 0; i < dataTypes[0].length - 1; i++) { | |
| 2208 | + if (nSettings.seriesFormat[i] === '#%') { | |
| 2209 | + nSettings.seriesFormat[i] = ''; | |
| 2210 | + } | |
| 2211 | + } | |
| 2212 | + } | |
| 2213 | + } | |
| 2214 | + | |
| 2215 | + for (var i = 1; i < dataTypes[0].length; i++) { | |
| 2216 | + if (nSettings.seriesFormat[i - 1]) { | |
| 2217 | + var formatter = new google.visualization.NumberFormat({ | |
| 2218 | + pattern: nSettings.seriesFormat[i - 1] | |
| 2219 | + }); | |
| 2220 | + formatter.format(_this.chartData, i); | |
| 2221 | + } | |
| 2222 | + } | |
| 2223 | + | |
| 2224 | + | |
| 1890 | 2225 | _this.chartObj = new google.visualization.LineChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1891 | 2226 | |
| 1892 | 2227 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1893 | 2228 | _this.resizeChart(); |
| 2229 | + // Fix ARIA attributes for accessibility compliance | |
| 2230 | + setTimeout(function() { | |
| 2231 | + _this.fixAriaAttributes(); | |
| 2232 | + }, 100); | |
| 1894 | 2233 | } |
| 1895 | 2234 | /* */ |
| 1896 | 2235 | } |
| 1897 | 2236 | |
| @@ -1903,10 +2242,12 @@ | ||
| 1903 | 2242 | |
| 1904 | 2243 | var settings = _this.chartSourceData.settings; |
| 1905 | 2244 | var nSettings = _this.configOptionsForCharts(settings); |
| 1906 | 2245 | |
| 2246 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 2247 | + | |
| 1907 | 2248 | /* == Google part == */ |
| 1908 | - google.charts.load('current', {'packages':['corechart']}); | |
| 2249 | + google.charts.load('current', {'packages':['corechart'], 'language': userLocale}); | |
| 1909 | 2250 | google.charts.setOnLoadCallback(drawChart); |
| 1910 | 2251 | |
| 1911 | 2252 | function drawChart() { |
| 1912 | 2253 | _this.chartData = isChangedType ? _this.chartData : google.visualization.arrayToDataTable( dataTypes ); |
| @@ -1920,10 +2261,10 @@ | ||
| 1920 | 2261 | bottom: nSettings.chartBottomMargin, |
| 1921 | 2262 | }, |
| 1922 | 2263 | backgroundColor: { |
| 1923 | 2264 | fill: nSettings.backgroundColor, |
| 1924 | - strokeWidth: nSettings.borderWidth, | |
| 1925 | - stroke: nSettings.borderColor | |
| 2265 | + // strokeWidth: nSettings.borderWidth, | |
| 2266 | + // stroke: nSettings.borderColor | |
| 1926 | 2267 | }, |
| 1927 | 2268 | enableInteractivity: nSettings.enableInteractivity, |
| 1928 | 2269 | legend: { |
| 1929 | 2270 | position: nSettings.legendPosition, |
| @@ -1970,8 +2311,12 @@ | ||
| 1970 | 2311 | _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) ); |
| 1971 | 2312 | |
| 1972 | 2313 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1973 | 2314 | _this.resizeChart(); |
| 2315 | + // Fix ARIA attributes for accessibility compliance | |
| 2316 | + setTimeout(function() { | |
| 2317 | + _this.fixAriaAttributes(); | |
| 2318 | + }, 100); | |
| 1974 | 2319 | } |
| 1975 | 2320 | /* */ |
| 1976 | 2321 | } |
| 1977 | 2322 | |
| @@ -1984,10 +2329,12 @@ | ||
| 1984 | 2329 | |
| 1985 | 2330 | var settings = _this.chartSourceData.settings; |
| 1986 | 2331 | var nSettings = _this.configOptionsForCharts(settings); |
| 1987 | 2332 | |
| 2333 | + var userLocale = navigator.language || navigator.userLanguage || 'en'; | |
| 2334 | + | |
| 1988 | 2335 | /* == Google part == */ |
| 1989 | - google.charts.load('current', {'packages':['orgchart']}); | |
| 2336 | + google.charts.load('current', {'packages':['orgchart'], 'language': userLocale}); | |
| 1990 | 2337 | google.charts.setOnLoadCallback(drawChart); |
| 1991 | 2338 | |
| 1992 | 2339 | function drawChart() { |
| 1993 | 2340 | _this.chartDataArray = isChangedType ? _this.chartDataArray : dataTypes; |
| @@ -2022,8 +2369,12 @@ | ||
| 2022 | 2369 | |
| 2023 | 2370 | _this.chartObj.draw( view, _this.chartOptions ); |
| 2024 | 2371 | _this.resizeChart(); |
| 2025 | 2372 | _this.setOrgChartCustomStyles(); |
| 2373 | + // Fix ARIA attributes for accessibility compliance | |
| 2374 | + setTimeout(function() { | |
| 2375 | + _this.fixAriaAttributes(); | |
| 2376 | + }, 100); | |
| 2026 | 2377 | } |
| 2027 | 2378 | |
| 2028 | 2379 | _this.$el.on('click', '.google-visualization-orgchart-node-small, .google-visualization-orgchart-node-medium, .google-visualization-orgchart-node-large', function(e) { |
| 2029 | 2380 | if (nSettings.orgSelectedClassname !== '') { |
| @@ -2079,10 +2430,10 @@ | ||
| 2079 | 2430 | var newSettings = {}; |
| 2080 | 2431 | |
| 2081 | 2432 | newSettings.chartFontSize = settings['font_size']; |
| 2082 | 2433 | newSettings.backgroundColor = settings['transparent_background'] && settings['transparent_background'] === 'checked' ? 'transparent' : settings['background_color']; |
| 2083 | - newSettings.borderWidth = settings['border_width']; | |
| 2084 | - newSettings.borderColor = settings['border_color']; | |
| 2434 | + // newSettings.borderWidth = settings['border_width']; | |
| 2435 | + // newSettings.borderColor = settings['border_color']; | |
| 2085 | 2436 | newSettings.tooltipTrigger = settings['tooltip_trigger']; |
| 2086 | 2437 | newSettings.tooltipText = settings['tooltip_text']; |
| 2087 | 2438 | newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false; |
| 2088 | 2439 | newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'checked') ? true : false; |
| @@ -2136,8 +2487,10 @@ | ||
| 2136 | 2487 | newSettings.hAxisSlantedTextAngle = settings['haxis_slanted_text_angle']; |
| 2137 | 2488 | newSettings.hAxisShowTextEvery = settings['haxis_show_text_every']; |
| 2138 | 2489 | newSettings.vAxisFormat = settings['vaxis_format']; |
| 2139 | 2490 | newSettings.hAxisFormat = settings['haxis_format']; |
| 2491 | + newSettings.hAxisEnableDividePercent = (settings['haxis_enable_divide_percent'] == 'checked' && settings['haxis_format'] == 'percent') ? true : false; | |
| 2492 | + newSettings.vAxisEnableDividePercent = (settings['vaxis_enable_divide_percent'] == 'checked' && settings['vaxis_format'] == 'percent') ? true : false; | |
| 2140 | 2493 | newSettings.hAxisMinValue = settings['haxis_min_value']; |
| 2141 | 2494 | newSettings.hAxisMaxValue = settings['haxis_max_value']; |
| 2142 | 2495 | newSettings.vAxisMinValue = settings['vaxis_min_value']; |
| 2143 | 2496 | newSettings.vAxisMaxValue = settings['vaxis_max_value']; |
| @@ -2162,8 +2515,9 @@ | ||
| 2162 | 2515 | newSettings.animationDuration = settings['animation_duration']; |
| 2163 | 2516 | newSettings.animationStartup = (settings['animation_startup'] == 'checked') ? true : false; |
| 2164 | 2517 | newSettings.animationEasing = settings['animation_easing']; |
| 2165 | 2518 | newSettings.seriesColor = settings['series_color']; |
| 2519 | + newSettings.seriesFormat = settings['series_format']; | |
| 2166 | 2520 | newSettings.seriesVisibleInLegend = settings['series_visible_in_legend']; |
| 2167 | 2521 | newSettings.seriesLineWidth = settings['series_line_width']; |
| 2168 | 2522 | newSettings.seriesPointSize = settings['series_point_size']; |
| 2169 | 2523 | newSettings.seriesPointShape = settings['series_point_shape']; |
| @@ -2276,9 +2630,9 @@ | ||
| 2276 | 2630 | 'border' : 'none', |
| 2277 | 2631 | 'outline' : borderWidth + 'px solid ' + borderColor, |
| 2278 | 2632 | }); |
| 2279 | 2633 | } |
| 2280 | - | |
| 2634 | + | |
| 2281 | 2635 | if (orgSelectedClassname != '') { |
| 2282 | 2636 | var selectedNode = _this.$el.find('.' + orgSelectedClassname); |
| 2283 | 2637 | selectedNode.css({ |
| 2284 | 2638 | 'background-color' : selectedBgColor, |
| @@ -2290,8 +2644,9 @@ | ||
| 2290 | 2644 | // 'outline' : borderWidth + 'px solid ' + borderColor, |
| 2291 | 2645 | }); |
| 2292 | 2646 | } |
| 2293 | 2647 | |
| 2648 | + | |
| 2294 | 2649 | var description = _this.$el.find('.' + _this.htmlClassPrefix + 'org-chart-tree-description'); |
| 2295 | 2650 | description.css({ |
| 2296 | 2651 | 'color' : descriptionColor, |
| 2297 | 2652 | 'font-size' : descriptionSize + 'px', |
| @@ -2363,34 +2718,45 @@ | ||
| 2363 | 2718 | // Converting chart data for org chart type |
| 2364 | 2719 | ChartBuilderGoogleCharts.prototype.orgChartConvertData = function( data ){ |
| 2365 | 2720 | var _this = this; |
| 2366 | 2721 | var dataTypes = [['Name', 'Manager', 'Tooltip', 'Url']]; |
| 2722 | + | |
| 2723 | + var ordering = (_this.chartSourceData && Array.isArray(_this.chartSourceData.source_ordering)) | |
| 2724 | + ? _this.chartSourceData.source_ordering.slice() | |
| 2725 | + : []; | |
| 2726 | + | |
| 2727 | + ordering = ordering.map(String); | |
| 2728 | + | |
| 2729 | + Object.keys(data).forEach(function(key) { | |
| 2730 | + if (!ordering.includes(key)) { | |
| 2731 | + ordering.push(key); | |
| 2732 | + } | |
| 2733 | + }); | |
| 2734 | + | |
| 2367 | 2735 | // var name = ""; |
| 2368 | 2736 | // Collect data in new array for chart rendering |
| 2369 | - for ( var key in data ) { | |
| 2370 | - if ( data.hasOwnProperty( key ) ) { | |
| 2371 | - if (key != 0) { | |
| 2372 | - var name = data[key][0]; | |
| 2373 | - var description = data[key][1]; | |
| 2374 | - var image = (data[key].length > 6) ? data[key][2] : ''; | |
| 2375 | - var parent_name = (data[key].length > 6) ? data[key][3] : data[key][2]; | |
| 2376 | - var tooltip = (data[key].length > 6) ? data[key][4] : data[key][3]; | |
| 2377 | - var url = (data[key].length > 6) ? data[key][5] : ''; | |
| 2378 | - | |
| 2379 | - if (description) { | |
| 2380 | - name += _this.orgChartFormatName(description); | |
| 2381 | - } | |
| 2382 | - if (image && image != '') { | |
| 2383 | - name = _this.orgChartFormatImage(image) + name; | |
| 2384 | - } | |
| 2385 | - name = {'v': data[key][0], 'f': name}; | |
| 2386 | - dataTypes.push([ | |
| 2387 | - name, parent_name, tooltip, url | |
| 2388 | - ]); | |
| 2389 | - } | |
| 2737 | + ordering.forEach(function(key) { | |
| 2738 | + if (!data.hasOwnProperty(key) || key == 0) return; | |
| 2739 | + | |
| 2740 | + var row = data[key]; | |
| 2741 | + var name = row[0]; | |
| 2742 | + var description = row[1]; | |
| 2743 | + var image = (row.length > 6) ? row[2] : ''; | |
| 2744 | + var parent_name = (row.length > 6) ? row[3] : row[2]; | |
| 2745 | + var tooltip = (row.length > 6) ? row[4] : row[3]; | |
| 2746 | + var url = (row.length > 6) ? row[5] : ''; | |
| 2747 | + | |
| 2748 | + if (description) { | |
| 2749 | + name += _this.orgChartFormatName(description); | |
| 2390 | 2750 | } |
| 2391 | - } | |
| 2751 | + if (image && image !== '') { | |
| 2752 | + name = _this.orgChartFormatImage(image) + name; | |
| 2753 | + } | |
| 2392 | 2754 | |
| 2755 | + name = {'v': row[0], 'f': name}; | |
| 2756 | + dataTypes.push([name, parent_name, tooltip, url]); | |
| 2757 | + }); | |
| 2758 | + | |
| 2393 | 2759 | return dataTypes; |
| 2394 | 2760 | } |
| 2395 | 2761 | |
| 2396 | 2762 | ChartBuilderGoogleCharts.prototype.orgChartFormatName = function( description ){ |
| @@ -3087,8 +3453,16 @@ | ||
| 3087 | 3453 | |
| 3088 | 3454 | chartData[branchId] = [changedName, changedDescription, changedImage, changedParentName, changedTooltip, changedUrl, changedParentId, changedLevel] |
| 3089 | 3455 | }) |
| 3090 | 3456 | |
| 3457 | + var newOrdering = []; | |
| 3458 | + treeManual.find("> li.tree-branch").each(function() { | |
| 3459 | + newOrdering.push($(this).attr("data-id")); | |
| 3460 | + }); | |
| 3461 | + if (_this.chartSourceData) { | |
| 3462 | + _this.chartSourceData.source_ordering = newOrdering; | |
| 3463 | + } | |
| 3464 | + | |
| 3091 | 3465 | _this.chartData = _this.orgChartConvertData( chartData ); |
| 3092 | 3466 | _this.chartTempData = _this.chartData; |
| 3093 | 3467 | _this.chartData = window.google.visualization.arrayToDataTable( _this.chartData ); |
| 3094 | 3468 | _this.updateChartData( _this.chartData ); |
| @@ -3102,13 +3476,66 @@ | ||
| 3102 | 3476 | e.innerHTML = input; |
| 3103 | 3477 | return e.childNodes[0].nodeValue; |
| 3104 | 3478 | } |
| 3105 | 3479 | |
| 3480 | + // Fix ARIA attributes for WCAG compliance | |
| 3481 | + ChartBuilderGoogleCharts.prototype.fixAriaAttributes = function() { | |
| 3482 | + var _this = this; | |
| 3483 | + var chartContainer = document.getElementById(_this.htmlClassPrefix + _this.chartType); | |
| 3484 | + | |
| 3485 | + if (!chartContainer) { | |
| 3486 | + return; | |
| 3487 | + } | |
| 3488 | + | |
| 3489 | + // Find all divs with aria-label | |
| 3490 | + var divsWithAriaLabel = chartContainer.querySelectorAll('div[aria-label]'); | |
| 3491 | + divsWithAriaLabel.forEach(function(div) { | |
| 3492 | + // Check if this div contains a table (the data table representation) | |
| 3493 | + if (div.querySelector('table')) { | |
| 3494 | + // Add role="region" to the table container div | |
| 3495 | + if (!div.hasAttribute('role')) { | |
| 3496 | + div.setAttribute('role', 'region'); | |
| 3497 | + } | |
| 3498 | + } else { | |
| 3499 | + // Remove aria-label from divs without roles (not table containers) | |
| 3500 | + if (!div.hasAttribute('role')) { | |
| 3501 | + div.removeAttribute('aria-label'); | |
| 3502 | + } | |
| 3503 | + } | |
| 3504 | + }); | |
| 3505 | + | |
| 3506 | + // Add role="img" to SVG elements with aria-label | |
| 3507 | + var svgElements = chartContainer.querySelectorAll('svg[aria-label]'); | |
| 3508 | + svgElements.forEach(function(svg) { | |
| 3509 | + if (!svg.hasAttribute('role')) { | |
| 3510 | + svg.setAttribute('role', 'img'); | |
| 3511 | + } | |
| 3512 | + }); | |
| 3513 | + } | |
| 3514 | + | |
| 3106 | 3515 | ChartBuilderGoogleCharts.prototype.drawChartFunction = function (source, options) { |
| 3107 | 3516 | var _this = this; |
| 3108 | 3517 | |
| 3109 | 3518 | var view = new google.visualization.DataView(source); |
| 3110 | 3519 | _this.chartData = source; |
| 3520 | + | |
| 3521 | + // Set role="img" on the chart container | |
| 3522 | + var chartContainer = document.getElementById(_this.htmlClassPrefix + _this.chartType + (_this.uniqueId || '')); | |
| 3523 | + if (chartContainer) { | |
| 3524 | + chartContainer.setAttribute('role', 'img'); | |
| 3525 | + } | |
| 3526 | + | |
| 3527 | + // Fix ARIA attributes after chart is drawn | |
| 3528 | + var drawCallback = function() { | |
| 3529 | + _this.fixAriaAttributes(); | |
| 3530 | + }; | |
| 3531 | + | |
| 3532 | + // Add callback to options if it doesn't exist | |
| 3533 | + if (typeof options.chartArea === 'object') { | |
| 3534 | + options.chartArea.chartReady = drawCallback; | |
| 3535 | + } else { | |
| 3536 | + options.chartReady = drawCallback; | |
| 3537 | + } | |
| 3111 | 3538 | |
| 3112 | 3539 | if (_this.chartType == 'org_chart') { |
| 3113 | 3540 | view.setColumns([0, 1, 2]); |
| 3114 | 3541 | } |
