diff options
-rw-r--r-- | modern/package.json | 3 | ||||
-rw-r--r-- | modern/public/logo.svg | 170 | ||||
-rw-r--r-- | modern/public/logo_back.svg | 33 | ||||
-rw-r--r-- | modern/src/MainToolbar.js | 51 | ||||
-rw-r--r-- | modern/src/components/reports/ReportNavbar.js | 16 | ||||
-rw-r--r-- | modern/src/components/reports/ReportSidebar.js | 9 | ||||
-rw-r--r-- | modern/src/reports/ChartReportPage.js | 16 | ||||
-rw-r--r-- | modern/src/reports/Graph.js | 28 | ||||
-rw-r--r-- | modern/src/reports/ReportLayoutPage.js | 14 |
9 files changed, 67 insertions, 273 deletions
diff --git a/modern/package.json b/modern/package.json index 8e5edc62..6902d37c 100644 --- a/modern/package.json +++ b/modern/package.json @@ -18,11 +18,10 @@ "react": "^16.13.1", "react-container-dimensions": "^1.4.1", "react-dom": "^16.13.1", - "react-perfect-scrollbar": "^1.5.8", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", - "recharts": "^1.8.5", + "recharts": "^2.0.9", "redux": "^4.0.5", "typeface-roboto": "0.0.75", "wellknown": "^0.5.0" diff --git a/modern/public/logo.svg b/modern/public/logo.svg index c2ed83b2..008b46d4 100644 --- a/modern/public/logo.svg +++ b/modern/public/logo.svg @@ -1,145 +1,33 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> - -<svg - xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" - xmlns:dc="http://purl.org/dc/elements/1.1/" - xmlns:cc="http://creativecommons.org/ns#" - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:svg="http://www.w3.org/2000/svg" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="240" - height="64" - viewBox="0 0 63.499999 16.933334" - version="1.1" - id="svg8" - inkscape:version="0.92.4 (5da689c313, 2019-01-14)" - sodipodi:docname="logo.svg"> - <defs - id="defs2"> - <linearGradient - id="linearGradient2390" - osb:paint="solid"> - <stop - style="stop-color:#333366;stop-opacity:1;" - offset="0" - id="stop2388" /> - </linearGradient> - <linearGradient - id="linearGradient2384" - osb:paint="solid"> - <stop - style="stop-color:#333366;stop-opacity:1;" - offset="0" - id="stop2382" /> - </linearGradient> - <linearGradient - inkscape:collect="always" - id="linearGradient918"> - <stop - style="stop-color:#000000;stop-opacity:1;" - offset="0" - id="stop914" /> - <stop - style="stop-color:#000000;stop-opacity:0;" - offset="1" - id="stop916" /> - </linearGradient> - <radialGradient - inkscape:collect="always" - xlink:href="#linearGradient918" - id="radialGradient922" - cx="43.49408" - cy="270.17709" - fx="43.49408" - fy="270.17709" - r="21.214052" - gradientTransform="matrix(0.99999999,0,0,0.19295707,-1.1295587,218.0445)" - gradientUnits="userSpaceOnUse" /> - </defs> - <sodipodi:namedview - id="base" - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1.0" - inkscape:pageopacity="0.0" - inkscape:pageshadow="2" - inkscape:zoom="3" - inkscape:cx="116.94054" - inkscape:cy="22.536867" - inkscape:document-units="px" - inkscape:current-layer="layer1" - showgrid="false" - units="px" - showguides="true" - inkscape:guide-bbox="true" - inkscape:window-width="1366" - inkscape:window-height="705" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" /> - <metadata - id="metadata5"> - <rdf:RDF> - <cc:Work - rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - <dc:title></dc:title> - </cc:Work> - </rdf:RDF> - </metadata> - <g - inkscape:label="Layer 1" - inkscape:groupmode="layer" - id="layer1" - transform="translate(0,-280.06665)"> - <g - style="fill:none;stroke:#333366;stroke-width:0.97500001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="g836" - transform="matrix(0.70555556,0,0,0.70555556,0,280.06665)"> - <circle - id="circle825" - r="10" - cy="12" - cx="12" - style="stroke-width:0.97500001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke:#333366;stroke-opacity:1" /> - </g> - <text - xml:space="preserve" - style="font-style:normal;font-weight:normal;font-size:11.23277092px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" - x="20.57909" - y="274.1069" - id="text910" - transform="scale(0.93694412,1.0672995)"><tspan - sodipodi:role="line" - id="tspan908" - x="20.57909" - y="274.1069" - style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:1.25;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Semi-Bold';fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1">GPSLABS</tspan></text> - <g - style="fill:none;stroke:#333366;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" - id="g2425" - transform="matrix(0.36473567,0,0,0.40335671,3.8780119,283.52041)"> - <polygon - id="polygon2408" - points="16,6 8,2 1,6 1,22 8,18 16,22 23,18 23,2 " /> - <line - id="line2410" - y2="18" - x2="8" - y1="2" - x1="8" /> - <line - id="line2412" - y2="22" - x2="16" - y1="6" - x1="16" /> - </g> +<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> + <metadata id="metadata2990"> + <rdf:RDF> + <cc:Work rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> + <dc:title/> + </cc:Work> + </rdf:RDF> + </metadata> + <g id="layer1"> + <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/> + <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/> + <g fill="#336"> + <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/> + <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/> + <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/> + <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/> + <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/> + <g id="text3003" aria-label="Traccar"> + <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/> + <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> + <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/> + <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> + <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> + <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/> + <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> + </g> </g> + </g> </svg> diff --git a/modern/public/logo_back.svg b/modern/public/logo_back.svg deleted file mode 100644 index 008b46d4..00000000 --- a/modern/public/logo_back.svg +++ /dev/null @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Created with Inkscape (http://www.inkscape.org/) --> -<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> - <metadata id="metadata2990"> - <rdf:RDF> - <cc:Work rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> - <dc:title/> - </cc:Work> - </rdf:RDF> - </metadata> - <g id="layer1"> - <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/> - <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/> - <g fill="#336"> - <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/> - <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/> - <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/> - <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/> - <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/> - <g id="text3003" aria-label="Traccar"> - <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/> - <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> - <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/> - <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> - <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> - <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/> - <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> - </g> - </g> - </g> -</svg> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 702a7e50..63d8efec 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -22,12 +22,7 @@ import PeopleIcon from '@material-ui/icons/People'; import StorageIcon from '@material-ui/icons/Storage'; import PersonIcon from '@material-ui/icons/Person'; import NotificationsIcon from '@material-ui/icons/Notifications'; -import TimelineIcon from '@material-ui/icons/Timeline'; -import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; -import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; -import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import DescriptionIcon from '@material-ui/icons/Description'; import FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; import BuildIcon from '@material-ui/icons/Build'; @@ -104,50 +99,12 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('reportReplay')} /> </ListItem> - </List> - <Divider /> - <List - subheader={ - <ListSubheader> - {t('reportTitle')} - </ListSubheader> - }> <ListItem button onClick={() => history.push('/reports/route')}> <ListItemIcon> - <TimelineIcon /> - </ListItemIcon> - <ListItemText primary={t('reportRoute')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/event')}> - <ListItemIcon> - <NotificationsActiveIcon /> + <DescriptionIcon /> </ListItemIcon> - <ListItemText primary={t('reportEvents')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/trip')}> - <ListItemIcon> - <PlayCircleFilledIcon /> - </ListItemIcon> - <ListItemText primary={t('reportTrips')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/stop')}> - <ListItemIcon> - <PauseCircleFilledIcon /> - </ListItemIcon> - <ListItemText primary={t('reportStops')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/summary')}> - <ListItemIcon> - <FormatListBulletedIcon /> - </ListItemIcon> - <ListItemText primary={t('reportSummary')} /> - </ListItem> - <ListItem button onClick={() => history.push('/reports/chart')}> - <ListItemIcon> - <TrendingUpIcon /> - </ListItemIcon> - <ListItemText primary={t('reportChart')} /> - </ListItem> + <ListItemText primary={t('reportTitle')} /> + </ListItem> </List> <Divider /> <List diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js index 93c01a06..674db3a4 100644 --- a/modern/src/components/reports/ReportNavbar.js +++ b/modern/src/components/reports/ReportNavbar.js @@ -1,16 +1,9 @@ import React from 'react'; -import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; - +import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; import t from '../../common/localization'; -const useStyles = makeStyles(theme => ({ - menuButton: { - } -})); -const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => { - - const classes = useStyles(); +const ReportNavbar = ({ openDrawer, setOpenDrawer }) => { return ( <AppBar position="fixed" color="inherit"> @@ -19,12 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => { color="inherit" aria-label="open drawer" edge="start" - onClick={() => setOpenDrawer(!openDrawer)} - className={classes.menuButton}> + onClick={() => setOpenDrawer(!openDrawer)}> <MenuIcon /> </IconButton> <Typography variant="h6" noWrap> - {t('reportTitle')} / {reportName} + {t('reportTitle')} </Typography> </Toolbar> </AppBar> diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js index e42c36ee..a71ac4b1 100644 --- a/modern/src/components/reports/ReportSidebar.js +++ b/modern/src/components/reports/ReportSidebar.js @@ -1,8 +1,8 @@ import React from 'react'; -import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; -import { Link, useHistory, useLocation } from 'react-router-dom'; +import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core'; +import { Link, useLocation } from 'react-router-dom'; -const ReportNavbar = ({ routes, setReportName }) => { +const ReportNavbar = ({ routes }) => { const location = useLocation(); @@ -15,8 +15,7 @@ const ReportNavbar = ({ routes, setReportName }) => { key={`${route}${index}`} button to={route.href} - selected={route.href === location.pathname} - onClick={() => setReportName(route.name)}> + selected={route.href === location.pathname}> <ListItemIcon> {route.icon} </ListItemIcon> diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index c75c9b71..0a5c8e18 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -61,15 +61,13 @@ const ChartReportPage = () => { const [type, setType] = useState('speed'); return ( - <> - <ReportLayoutPage filter={ - <Filter setItems={setItems}> - <ChartType type={type} setType={setType} /> - </Filter> - }> - <Graph items={items} type={type} /> - </ReportLayoutPage> - </> + <ReportLayoutPage filter={ + <Filter setItems={setItems}> + <ChartType type={type} setType={setType} /> + </Filter> + }> + <Graph items={items} type={type} /> + </ReportLayoutPage> ) } diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js index af54e10e..b785e06f 100644 --- a/modern/src/reports/Graph.js +++ b/modern/src/reports/Graph.js @@ -3,6 +3,10 @@ import { Box, Paper } from '@material-ui/core'; import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const CustomizedAxisTick = ({ x, y, payload }) =>{ + console.log('inside customized tick ', payload.value) + if(!payload.value) { + return payload.value; + } const parts = payload.value.split(' '); return ( <g transform={`translate(${x},${y})`}> @@ -15,20 +19,16 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{ const Graph = ({ type, items }) => { return ( - <Paper> - <Box height={400}> - <ResponsiveContainer> - <LineChart data={items}> - <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} /> - <YAxis /> - <CartesianGrid strokeDasharray="3 3" /> - <Tooltip /> - <Legend /> - <Line type="natural" dataKey={type} /> - </LineChart> - </ResponsiveContainer> - </Box> - </Paper> + <ResponsiveContainer height={400} width={500}> + <LineChart data={items}> + <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Line type="natural" dataKey={type} /> + </LineChart> + </ResponsiveContainer> ); } diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index 23ac6d71..ed7fe544 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { Grid, Box, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; +import { useHistory } from 'react-router-dom'; +import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; import TimelineIcon from '@material-ui/icons/Timeline'; import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; @@ -10,9 +11,6 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import ReportSidebar from '../components/reports/ReportSidebar' import ReportNavbar from '../components/reports/ReportNavbar' - -import { Link, useHistory, useLocation } from 'react-router-dom'; - import t from '../common/localization'; const useStyles = makeStyles(theme => ({ @@ -60,7 +58,7 @@ const routes = [ { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> }, ]; -const ReportLayoutPage = ({ children, filter }) => { +const ReportLayoutPage = ({ children, filter, }) => { const classes = useStyles(); const history = useHistory(); const [openDrawer, setOpenDrawer] = useState(false); @@ -102,11 +100,7 @@ const ReportLayoutPage = ({ children, filter }) => { <div className={classes.toolbar} /> <Grid container direction="column" spacing={2}> <Grid item>{filter}</Grid> - <Grid item> - <Box sx={{ minWidth: 1050 }}> - {children} - </Box> - </Grid> + <Grid item>{children}</Grid> </Grid> </div> </div> |