| @@ -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 | }); |
| @@ -314,8 +315,14 @@ | ||
| 314 | 315 | _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-radius', $(this).val() + 'px'); |
| 315 | 316 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 316 | 317 | }); |
| 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 | + | |
| 318 | 325 | _this.$el.find('#'+_this.htmlClassPrefix+'option-border-width-with-title').on('input', function () { |
| 319 | 326 | _this.chartSourceData.settings.border_width_with_title = $(this).val(); |
| 320 | 327 | _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-width', $(this).val() + 'px'); |
| 321 | 328 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -360,9 +367,9 @@ | ||
| 360 | 367 | _this.$el.find('#'+_this.htmlClassPrefix+'option-box-shadow').on('change', function () { |
| 361 | 368 | if ($(this).is(':checked')) { |
| 362 | 369 | _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', '2px 2px 10px 2px ' + _this.chartSourceData.settings.border_color); |
| 363 | 370 | } else { |
| 364 | - _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', ''); | |
| 371 | + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', 'unset'); | |
| 365 | 372 | } |
| 366 | 373 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 367 | 374 | }); |
| 368 | 375 | |
| @@ -540,12 +547,23 @@ | ||
| 540 | 547 | }); |
| 541 | 548 | |
| 542 | 549 | _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-format').on('change', function () { |
| 543 | 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 | + } | |
| 544 | 556 | _this.chartSourceData.settings.haxis_format = _this.chartOptions.hAxis.format; |
| 545 | 557 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 546 | 558 | }); |
| 547 | 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 | + | |
| 548 | 566 | _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-label-font-size').on('input', function () { |
| 549 | 567 | _this.chartOptions.hAxis.titleTextStyle.fontSize = $(this).val(); |
| 550 | 568 | _this.chartSourceData.settings.haxis_label_font_size = _this.chartOptions.hAxis.titleTextStyle.fontSize; |
| 551 | 569 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -649,12 +667,23 @@ | ||
| 649 | 667 | }); |
| 650 | 668 | |
| 651 | 669 | _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-format').on('change', function () { |
| 652 | 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 | + } | |
| 653 | 676 | _this.chartSourceData.settings.vaxis_format = _this.chartOptions.vAxis.format; |
| 654 | 677 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 655 | 678 | }); |
| 656 | 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 | + }); | |
| 657 | 686 | _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-label-font-size').on('input', function () { |
| 658 | 687 | _this.chartOptions.vAxis.titleTextStyle.fontSize = $(this).val(); |
| 659 | 688 | _this.chartSourceData.settings.vaxis_label_font_size = _this.chartOptions.vAxis.titleTextStyle.fontSize; |
| 660 | 689 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| @@ -719,8 +748,153 @@ | ||
| 719 | 748 | _this.chartSourceData.settings.vaxis_minor_gridlines_color = _this.chartOptions.vAxis.minorGridlines.color; |
| 720 | 749 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 721 | 750 | }); |
| 722 | 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 | + | |
| 723 | 897 | // animation settings |
| 724 | 898 | _this.$el.find('#'+_this.htmlClassPrefix+'option-enable-animation').on('change', function () { |
| 725 | 899 | if ($(this).is(':checked')) { |
| 726 | 900 | _this.chartOptions.animation = { |
| @@ -1011,9 +1185,9 @@ | ||
| 1011 | 1185 | _this.setOrgChartCustomStyles(); |
| 1012 | 1186 | } |
| 1013 | 1187 | }); |
| 1014 | 1188 | |
| 1015 | - _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 () { | |
| 1016 | 1190 | _this.chartOptions.selectedNodeClass = $(this).val(); |
| 1017 | 1191 | _this.chartSourceData.settings.org_selected_classname = _this.chartOptions.selectedNodeClass; |
| 1018 | 1192 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 1019 | 1193 | }); |
| @@ -1075,8 +1249,16 @@ | ||
| 1075 | 1249 | _this.drawChartFunction(_this.chartData, _this.chartOptions); |
| 1076 | 1250 | } |
| 1077 | 1251 | }); |
| 1078 | 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 | + | |
| 1079 | 1261 | _this.$el.find('.'+_this.htmlClassPrefix+'option-series-visible-in-legend').on('input', function () { |
| 1080 | 1262 | if (_this.chartSourceData.source[0].length > 2) { |
| 1081 | 1263 | var id = $(this).attr('data-series-id'); |
| 1082 | 1264 | _this.chartOptions.series[id].visibleInLegend = $(this).is(':checked'); |
| @@ -1449,8 +1631,12 @@ | ||
| 1449 | 1631 | _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) ); |
| 1450 | 1632 | |
| 1451 | 1633 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1452 | 1634 | _this.resizeChart(); |
| 1635 | + // Fix ARIA attributes for accessibility compliance | |
| 1636 | + setTimeout(function() { | |
| 1637 | + _this.fixAriaAttributes(); | |
| 1638 | + }, 100); | |
| 1453 | 1639 | } |
| 1454 | 1640 | /* */ |
| 1455 | 1641 | } |
| 1456 | 1642 | |
| @@ -1596,16 +1782,56 @@ | ||
| 1596 | 1782 | if (nSettings.enableAnimation) { |
| 1597 | 1783 | _this.chartOptions.animation = { |
| 1598 | 1784 | startup: nSettings.animationStartup, |
| 1599 | 1785 | duration: nSettings.animationDuration, |
| 1600 | - easing: nSettings.animationEasing, | |
| 1786 | + easing: nSettings.animationEasing, | |
| 1601 | 1787 | } |
| 1602 | 1788 | } |
| 1603 | - | |
| 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 | + } | |
| 1604 | 1826 | _this.chartObj = new google.visualization.BarChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1605 | 1827 | |
| 1606 | 1828 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1607 | 1829 | _this.resizeChart(); |
| 1830 | + // Fix ARIA attributes for accessibility compliance | |
| 1831 | + setTimeout(function() { | |
| 1832 | + _this.fixAriaAttributes(); | |
| 1833 | + }, 100); | |
| 1608 | 1834 | } |
| 1609 | 1835 | /* */ |
| 1610 | 1836 | } |
| 1611 | 1837 | |
| @@ -1756,13 +1982,48 @@ | ||
| 1756 | 1982 | duration: nSettings.animationDuration, |
| 1757 | 1983 | easing: nSettings.animationEasing, |
| 1758 | 1984 | } |
| 1759 | 1985 | } |
| 1760 | - | |
| 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 | + } | |
| 1761 | 2018 | _this.chartObj = new google.visualization.ColumnChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1762 | 2019 | |
| 1763 | 2020 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1764 | 2021 | _this.resizeChart(); |
| 2022 | + // Fix ARIA attributes for accessibility compliance | |
| 2023 | + setTimeout(function() { | |
| 2024 | + _this.fixAriaAttributes(); | |
| 2025 | + }, 100); | |
| 1765 | 2026 | } |
| 1766 | 2027 | /* */ |
| 1767 | 2028 | } |
| 1768 | 2029 | |
| @@ -1925,12 +2186,51 @@ | ||
| 1925 | 2186 | easing: nSettings.animationEasing, |
| 1926 | 2187 | } |
| 1927 | 2188 | } |
| 1928 | 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 | + | |
| 1929 | 2225 | _this.chartObj = new google.visualization.LineChart(document.getElementById(_this.htmlClassPrefix + _this.chartType)); |
| 1930 | 2226 | |
| 1931 | 2227 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 1932 | 2228 | _this.resizeChart(); |
| 2229 | + // Fix ARIA attributes for accessibility compliance | |
| 2230 | + setTimeout(function() { | |
| 2231 | + _this.fixAriaAttributes(); | |
| 2232 | + }, 100); | |
| 1933 | 2233 | } |
| 1934 | 2234 | /* */ |
| 1935 | 2235 | } |
| 1936 | 2236 | |
| @@ -2011,8 +2311,12 @@ | ||
| 2011 | 2311 | _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) ); |
| 2012 | 2312 | |
| 2013 | 2313 | _this.chartObj.draw( _this.chartData, _this.chartOptions ); |
| 2014 | 2314 | _this.resizeChart(); |
| 2315 | + // Fix ARIA attributes for accessibility compliance | |
| 2316 | + setTimeout(function() { | |
| 2317 | + _this.fixAriaAttributes(); | |
| 2318 | + }, 100); | |
| 2015 | 2319 | } |
| 2016 | 2320 | /* */ |
| 2017 | 2321 | } |
| 2018 | 2322 | |
| @@ -2065,8 +2369,12 @@ | ||
| 2065 | 2369 | |
| 2066 | 2370 | _this.chartObj.draw( view, _this.chartOptions ); |
| 2067 | 2371 | _this.resizeChart(); |
| 2068 | 2372 | _this.setOrgChartCustomStyles(); |
| 2373 | + // Fix ARIA attributes for accessibility compliance | |
| 2374 | + setTimeout(function() { | |
| 2375 | + _this.fixAriaAttributes(); | |
| 2376 | + }, 100); | |
| 2069 | 2377 | } |
| 2070 | 2378 | |
| 2071 | 2379 | _this.$el.on('click', '.google-visualization-orgchart-node-small, .google-visualization-orgchart-node-medium, .google-visualization-orgchart-node-large', function(e) { |
| 2072 | 2380 | if (nSettings.orgSelectedClassname !== '') { |
| @@ -2179,8 +2487,10 @@ | ||
| 2179 | 2487 | newSettings.hAxisSlantedTextAngle = settings['haxis_slanted_text_angle']; |
| 2180 | 2488 | newSettings.hAxisShowTextEvery = settings['haxis_show_text_every']; |
| 2181 | 2489 | newSettings.vAxisFormat = settings['vaxis_format']; |
| 2182 | 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; | |
| 2183 | 2493 | newSettings.hAxisMinValue = settings['haxis_min_value']; |
| 2184 | 2494 | newSettings.hAxisMaxValue = settings['haxis_max_value']; |
| 2185 | 2495 | newSettings.vAxisMinValue = settings['vaxis_min_value']; |
| 2186 | 2496 | newSettings.vAxisMaxValue = settings['vaxis_max_value']; |
| @@ -2205,8 +2515,9 @@ | ||
| 2205 | 2515 | newSettings.animationDuration = settings['animation_duration']; |
| 2206 | 2516 | newSettings.animationStartup = (settings['animation_startup'] == 'checked') ? true : false; |
| 2207 | 2517 | newSettings.animationEasing = settings['animation_easing']; |
| 2208 | 2518 | newSettings.seriesColor = settings['series_color']; |
| 2519 | + newSettings.seriesFormat = settings['series_format']; | |
| 2209 | 2520 | newSettings.seriesVisibleInLegend = settings['series_visible_in_legend']; |
| 2210 | 2521 | newSettings.seriesLineWidth = settings['series_line_width']; |
| 2211 | 2522 | newSettings.seriesPointSize = settings['series_point_size']; |
| 2212 | 2523 | newSettings.seriesPointShape = settings['series_point_shape']; |
| @@ -2319,9 +2630,9 @@ | ||
| 2319 | 2630 | 'border' : 'none', |
| 2320 | 2631 | 'outline' : borderWidth + 'px solid ' + borderColor, |
| 2321 | 2632 | }); |
| 2322 | 2633 | } |
| 2323 | - | |
| 2634 | + | |
| 2324 | 2635 | if (orgSelectedClassname != '') { |
| 2325 | 2636 | var selectedNode = _this.$el.find('.' + orgSelectedClassname); |
| 2326 | 2637 | selectedNode.css({ |
| 2327 | 2638 | 'background-color' : selectedBgColor, |
| @@ -2333,8 +2644,9 @@ | ||
| 2333 | 2644 | // 'outline' : borderWidth + 'px solid ' + borderColor, |
| 2334 | 2645 | }); |
| 2335 | 2646 | } |
| 2336 | 2647 | |
| 2648 | + | |
| 2337 | 2649 | var description = _this.$el.find('.' + _this.htmlClassPrefix + 'org-chart-tree-description'); |
| 2338 | 2650 | description.css({ |
| 2339 | 2651 | 'color' : descriptionColor, |
| 2340 | 2652 | 'font-size' : descriptionSize + 'px', |
| @@ -2406,34 +2718,45 @@ | ||
| 2406 | 2718 | // Converting chart data for org chart type |
| 2407 | 2719 | ChartBuilderGoogleCharts.prototype.orgChartConvertData = function( data ){ |
| 2408 | 2720 | var _this = this; |
| 2409 | 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 | + | |
| 2410 | 2735 | // var name = ""; |
| 2411 | 2736 | // Collect data in new array for chart rendering |
| 2412 | - for ( var key in data ) { | |
| 2413 | - if ( data.hasOwnProperty( key ) ) { | |
| 2414 | - if (key != 0) { | |
| 2415 | - var name = data[key][0]; | |
| 2416 | - var description = data[key][1]; | |
| 2417 | - var image = (data[key].length > 6) ? data[key][2] : ''; | |
| 2418 | - var parent_name = (data[key].length > 6) ? data[key][3] : data[key][2]; | |
| 2419 | - var tooltip = (data[key].length > 6) ? data[key][4] : data[key][3]; | |
| 2420 | - var url = (data[key].length > 6) ? data[key][5] : ''; | |
| 2421 | - | |
| 2422 | - if (description) { | |
| 2423 | - name += _this.orgChartFormatName(description); | |
| 2424 | - } | |
| 2425 | - if (image && image != '') { | |
| 2426 | - name = _this.orgChartFormatImage(image) + name; | |
| 2427 | - } | |
| 2428 | - name = {'v': data[key][0], 'f': name}; | |
| 2429 | - dataTypes.push([ | |
| 2430 | - name, parent_name, tooltip, url | |
| 2431 | - ]); | |
| 2432 | - } | |
| 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); | |
| 2433 | 2750 | } |
| 2434 | - } | |
| 2751 | + if (image && image !== '') { | |
| 2752 | + name = _this.orgChartFormatImage(image) + name; | |
| 2753 | + } | |
| 2435 | 2754 | |
| 2755 | + name = {'v': row[0], 'f': name}; | |
| 2756 | + dataTypes.push([name, parent_name, tooltip, url]); | |
| 2757 | + }); | |
| 2758 | + | |
| 2436 | 2759 | return dataTypes; |
| 2437 | 2760 | } |
| 2438 | 2761 | |
| 2439 | 2762 | ChartBuilderGoogleCharts.prototype.orgChartFormatName = function( description ){ |
| @@ -3130,8 +3453,16 @@ | ||
| 3130 | 3453 | |
| 3131 | 3454 | chartData[branchId] = [changedName, changedDescription, changedImage, changedParentName, changedTooltip, changedUrl, changedParentId, changedLevel] |
| 3132 | 3455 | }) |
| 3133 | 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 | + | |
| 3134 | 3465 | _this.chartData = _this.orgChartConvertData( chartData ); |
| 3135 | 3466 | _this.chartTempData = _this.chartData; |
| 3136 | 3467 | _this.chartData = window.google.visualization.arrayToDataTable( _this.chartData ); |
| 3137 | 3468 | _this.updateChartData( _this.chartData ); |
| @@ -3145,13 +3476,66 @@ | ||
| 3145 | 3476 | e.innerHTML = input; |
| 3146 | 3477 | return e.childNodes[0].nodeValue; |
| 3147 | 3478 | } |
| 3148 | 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 | + | |
| 3149 | 3515 | ChartBuilderGoogleCharts.prototype.drawChartFunction = function (source, options) { |
| 3150 | 3516 | var _this = this; |
| 3151 | 3517 | |
| 3152 | 3518 | var view = new google.visualization.DataView(source); |
| 3153 | 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 | + } | |
| 3154 | 3538 | |
| 3155 | 3539 | if (_this.chartType == 'org_chart') { |
| 3156 | 3540 | view.setColumns([0, 1, 2]); |
| 3157 | 3541 | } |
