element for example)."
10 | */
11 | const ArrowDefs = ({ arrowWidth }) => (
12 |
13 | {Object.values(trcProjectTypes).map(type => (
14 |
24 |
29 | ))}
30 |
31 | );
32 |
33 | ArrowDefs.propTypes = {
34 | arrowWidth: PropTypes.number.isRequired,
35 | };
36 |
37 | export default ArrowDefs;
38 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 |
6 | // Responsive image
7 | //
8 | // Keep images from scaling beyond the width of their parents.
9 | @mixin img-responsive($display: block) {
10 | display: $display;
11 | max-width: 100%; // Part 1: Set a maximum relative to the parent
12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
13 | }
14 |
15 |
16 | // Retina image
17 | //
18 | // Short retina mixin for setting background-image and -size. Note that the
19 | // spelling of `min--moz-device-pixel-ratio` is intentional.
20 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
21 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
22 |
23 | @media
24 | only screen and (-webkit-min-device-pixel-ratio: 2),
25 | only screen and ( min--moz-device-pixel-ratio: 2),
26 | only screen and ( -o-min-device-pixel-ratio: 2/1),
27 | only screen and ( min-device-pixel-ratio: 2),
28 | only screen and ( min-resolution: 192dpi),
29 | only screen and ( min-resolution: 2dppx) {
30 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
31 | background-size: $width-1x $height-1x;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/development/trc/TRCDataTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import PropTypes from 'prop-types';
3 | import { timeDay, timeMonth } from 'd3-time';
4 | import PermitsTableWrapper from '../permits/PermitsTableWrapper';
5 | import TimeSlider from '../volume/TimeSlider';
6 | import ErrorBoundary from '../../../shared/ErrorBoundary';
7 | import { trcProjectTypes } from './textContent';
8 |
9 |
10 | class TRCDataTable extends React.Component {
11 | constructor() {
12 | super();
13 | const now = timeDay.floor(new Date());
14 | this.initialBrushExtent = [
15 | timeMonth.offset(now, -2).getTime(),
16 | now.getTime(),
17 | ];
18 | this.state = {
19 | timeSpan: this.initialBrushExtent,
20 | };
21 | }
22 |
23 | render() {
24 | return (
25 |
26 | this.setState({
28 | timeSpan: newExtent,
29 | })}
30 | defaultBrushExtent={this.initialBrushExtent}
31 | xSpan={2}
32 | tickMeasure="month"
33 | />
34 |
41 |
28 |
29 | {props.icon &&
30 | {translate(props.inTheCity ? 'in_city' : 'out_of_city', props.language.language)}
33 |
34 |
15 | {({ loading, error, data }) => {
16 | if (loading) return {
34 | if (!value || value === 0) { return '$0'; }
35 | return [value < 0 ? '-$' : '$', Math.abs(value).toLocaleString()].join('');
36 | }}
37 | />
38 | );
39 | }}
40 |
41 | );
42 |
43 | export default withLanguage(BudgetSankey);
44 |
--------------------------------------------------------------------------------
/docs/requirements/principles.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 | # Requirements & Getting Started
5 |
6 | ## Basic requirements
7 | * SimpliCity II is written in React. You will need:
8 | * Node
9 | * Webpack
10 | * Yarn
11 | * A code editor (Visual Studio Code recommended)
12 |
13 | ## Getting Started
14 | * Fork the repo and clone locally
15 | * Navigate to the project directory on your machine
16 | * Run "yarn" command in git bash to get all the packages as described by the package.json
17 | * Run "npm start" command to run the app at localhost:3000
18 |
19 | ## Notes on contributing
20 | * Fork the repo and branch off the development branch. We use this [git branching model](http://nvie.com/posts/a-successful-git-branching-model/)
21 | * General guidlines for [contributing to open source projects](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)
22 |
23 | ## If adapting the code base for your city
24 | * See the companion [simplicity-graphql-server repo](https://github.com/cityofasheville/simplicity-graphql-server) for the API
25 | * To run simplicity-graphql-server or your own API locally during development, you can specificy in an .env file whether or not to USE_LOCAL_API, and edit the graphql.js file to update the API URLs as needed.
26 | * If you wish for mobile users to be able to save the application to their homepage, remember to create your own manifest.json file.
27 | * Remember to update your README's and your package.json files with your information.
28 |
--------------------------------------------------------------------------------
/src/styles/components/disclaimer.scss:
--------------------------------------------------------------------------------
1 | /* reset */
2 | button {
3 | all: unset;
4 | }
5 |
6 | .AlertDialogOverlay {
7 | z-index: 9998;
8 | backdrop-filter: blur(4px);
9 | background-color: rgba(0, 0, 0, 0.3);
10 | position: fixed;
11 | inset: 0;
12 | animation: overlayShow .5s cubic-bezier(0.16, 1, 0.3, 1);
13 | }
14 |
15 | .AlertDialogContent {
16 | z-index: 9999;
17 | background-color: white;
18 | border-radius: 6px;
19 | box-shadow:
20 | hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
21 | hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
22 | position: fixed;
23 | top: 50%;
24 | left: 50%;
25 | transform: translate(-50%, -50%);
26 | width: 90vw;
27 | max-width: 500px;
28 | max-height: 85vh;
29 | padding: 25px;
30 | animation: contentShow .5s cubic-bezier(0.16, 1, 0.3, 1);
31 | }
32 | .AlertDialogContent:focus {
33 | outline: none;
34 | }
35 |
36 | .AlertDialogTitle {
37 | margin-top: 5px;
38 | margin-bottom: 30px;
39 | color: var(--mauve-12);
40 | font-size: 17px;
41 | font-weight: 500;
42 | }
43 |
44 | .AlertDialogDescription {
45 | margin-bottom: 20px;
46 | color: var(--mauve-11);
47 | font-size: 15px;
48 | line-height: 1.5;
49 | }
50 |
51 | @keyframes overlayShow {
52 | from {
53 | opacity: 0;
54 | }
55 | to {
56 | opacity: 1;
57 | }
58 | }
59 |
60 | @keyframes contentShow {
61 | from {
62 | opacity: 0;
63 | transform: translate(-50%, -48%) scale(0.96);
64 | }
65 | to {
66 | opacity: 1;
67 | transform: translate(-50%, -50%) scale(1);
68 | }
69 | }
70 |
71 |
72 |
--------------------------------------------------------------------------------
/src/app/search/Search.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { graphql, compose } from 'react-apollo';
3 | import { getSearchText } from './graphql/searchQueries';
4 | import { updateSearchText } from './graphql/searchMutations';
5 |
6 | import SearchBar from './SearchBar';
7 |
8 | let timeout = null;
9 |
10 | function Search (props) {
11 | console.log('Search props', props);
12 | return (
13 |
14 |
15 | {
19 | e.persist();
20 | clearTimeout(timeout);
21 | timeout = setTimeout(() => {
22 | console.log('debounced bit!', e.target.value);
23 | props.updateSearchText({
24 | variables: {
25 | text: e.target.value,
26 | },
27 | });
28 | }, 500);
29 | }}
30 | onSearchClick={text => props.updateSearchText({
31 | variables: {
32 | text,
33 | },
34 | })}
35 | location={props.location}
36 | />
37 |
38 |
11 | {this.props.children}
12 |
13 | );
14 |
15 | legend.onAdd = function (map) {
16 | const div = L.DomUtil.create('div', '');
17 | L.DomEvent.on(div, 'click', (e) => {
18 | if (!e.target.classList.contains('closeLegend')) {
19 | if (e.target.tagName === 'svg') {
20 | e.target.parentNode.nextSibling.style.display = e.target.parentNode.nextSibling.style.display === 'block' ? 'none' : 'block';
21 | } else if (e.target.tagName === 'path') {
22 | e.target.parentNode.parentNode.parentNode.nextSibling.style.display = e.target.parentNode.parentNode.parentNode.nextSibling.style.display === 'block' ? 'none' : 'block';
23 | } else {
24 | e.target.nextSibling.style.display = e.target.nextSibling.style.display === 'block' ? 'none' : 'block';
25 | }
26 | }
27 | });
28 | const root = createRoot(div);
29 | root.render(jsx);
30 | return div;
31 | };
32 |
33 | this.leafletElement = legend;
34 | }
35 | }
36 |
37 | MapLegendControl.defaultProps = {
38 | id: 'legend',
39 | };
40 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_badges.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Badges
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .badge {
8 | display: inline-block;
9 | min-width: 10px;
10 | padding: 3px 7px;
11 | font-size: $font-size-small;
12 | font-weight: $badge-font-weight;
13 | color: $badge-color;
14 | line-height: $badge-line-height;
15 | vertical-align: middle;
16 | white-space: nowrap;
17 | text-align: center;
18 | background-color: $badge-bg;
19 | border-radius: $badge-border-radius;
20 |
21 | // Empty badges collapse automatically (not available in IE8)
22 | &:empty {
23 | display: none;
24 | }
25 |
26 | // Quick fix for badges in buttons
27 | .btn & {
28 | position: relative;
29 | top: -1px;
30 | }
31 |
32 | .btn-xs &,
33 | .btn-group-xs > .btn & {
34 | top: 0;
35 | padding: 1px 5px;
36 | }
37 |
38 | // [converter] extracted a& to a.badge
39 |
40 | // Account for badges in navs
41 | .list-group-item.active > &,
42 | .nav-pills > .active > a > & {
43 | color: $badge-active-color;
44 | background-color: $badge-active-bg;
45 | }
46 |
47 | .list-group-item > & {
48 | float: right;
49 | }
50 |
51 | .list-group-item > & + & {
52 | margin-right: 5px;
53 | }
54 |
55 | .nav-pills > li > a > & {
56 | margin-left: 3px;
57 | }
58 | }
59 |
60 | // Hover state, but only for links
61 | a.badge {
62 | &:hover,
63 | &:focus {
64 | color: $badge-link-hover-color;
65 | text-decoration: none;
66 | cursor: pointer;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_labels.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Labels
3 | // --------------------------------------------------
4 |
5 | .label {
6 | display: inline;
7 | padding: .2em .6em .3em;
8 | font-size: 75%;
9 | font-weight: bold;
10 | line-height: 1;
11 | color: $label-color;
12 | text-align: center;
13 | white-space: nowrap;
14 | vertical-align: baseline;
15 | border-radius: .25em;
16 |
17 | // [converter] extracted a& to a.label
18 |
19 | // Empty labels collapse automatically (not available in IE8)
20 | &:empty {
21 | display: none;
22 | }
23 |
24 | // Quick fix for labels in buttons
25 | .btn & {
26 | position: relative;
27 | top: -1px;
28 | }
29 | }
30 |
31 | .radioGroup div > label {
32 | font-weight: normal;
33 | cursor: pointer;
34 | }
35 |
36 | // Add hover effects, but only for links
37 | a.label {
38 | &:hover,
39 | &:focus {
40 | color: $label-link-hover-color;
41 | text-decoration: none;
42 | cursor: pointer;
43 | }
44 | }
45 |
46 | // Colors
47 | // Contextual variations (linked labels get darker on :hover)
48 |
49 | .label-default {
50 | @include label-variant($label-default-bg);
51 | }
52 |
53 | .label-primary {
54 | @include label-variant($label-primary-bg);
55 | }
56 |
57 | .label-success {
58 | @include label-variant($label-success-bg);
59 | }
60 |
61 | .label-info {
62 | @include label-variant($label-info-bg);
63 | }
64 |
65 | .label-warning {
66 | @include label-variant($label-warning-bg);
67 | }
68 |
69 | .label-danger {
70 | @include label-variant($label-danger-bg);
71 | }
72 |
--------------------------------------------------------------------------------
/src/styles/components/Accordion.scss:
--------------------------------------------------------------------------------
1 | .panel {
2 | border: 1px solid #fff;
3 | color: inherit;
4 | }
5 |
6 | .panel a {
7 | color: inherit;
8 | }
9 |
10 | .panel-heading {
11 | background-color: #f2f2f2;
12 | border-bottom: 1px solid gray;
13 | }
14 |
15 | .accordion-panel-body {
16 | padding: 1rem;
17 | }
18 |
19 | .accordion-panel-body a {
20 | text-decoration: underline;
21 | }
22 |
23 | .accordion-panel-body a:focus, .accordion-panel-body a:hover {
24 | color: #4077a5;
25 | }
26 |
27 | .panel-collapse {
28 | border: 1px solid #f2f2f2;
29 | }
30 |
31 | .panel-title {
32 | padding: 0 1rem 0 0;
33 | }
34 |
35 | .panel-title-after {
36 | position: relative;
37 | height: 0;
38 | width: 0;
39 | display: inline;
40 | float: right;
41 | }
42 |
43 | .panel-title-after:after {
44 | content: '';
45 | width: 0;
46 | height: 0;
47 | border-left: 0.4em solid transparent;
48 | border-right: 0.4em solid transparent;
49 | border-top: 0.4em solid gray;
50 | background-color: none;
51 | text-align: right;
52 |
53 | /*Adjust for position however you want*/
54 | right: 0.75em;
55 | top: 0.5em;
56 | position: absolute;
57 | pointer-events: none;
58 | margin-right: -2rem;
59 | }
60 |
61 | .panel-title-after.open:after {
62 | transform: rotate(180deg);
63 | }
64 |
65 | // For nested accordions
66 | .accordion-root .accordion-root {
67 | margin: 0 0.5rem;
68 |
69 | .accordion-item-set {
70 | border-bottom: 1px solid #f2f2f2;
71 | }
72 |
73 | .panel-heading {
74 | background-color: transparent;
75 | }
76 |
77 | .panel-collapse {
78 | border: none;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/app/Topics.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import TopicCard from '../shared/TopicCard';
4 | import { withLanguage } from '../utilities/lang/LanguageContext';
5 | import {
6 | IM_TREE
7 | } from '../shared/iconConstants';
8 | import Icon from '../shared/Icon';
9 |
10 | const Topics = props => (
11 |
12 |
13 |
14 |
View citywide topic dashboards about your community.
15 |
16 |
17 |
18 | {props.topics.map((topic, i) => (
19 |
20 |
22 | ))}
23 |
24 |
12 |
13 |
14 |
15 |
16 | props.updateAuthModal({
21 | variables: {
22 | open: !props.open,
23 | },
24 | })}
25 | >
26 | ×
27 |
28 |
29 |
32 |
33 |
34 |
35 |
33 |
34 |
36 | {/*
37 | */}
39 |
40 | );
41 |
42 | EmailDownload.propTypes = {
43 | emailFunction: PropTypes.func,
44 | downloadData: PropTypes.array,
45 | fileName: PropTypes.string,
46 | lang: PropTypes.string,
47 | };
48 |
49 | EmailDownload.defaultProps = {
50 | emailFunction: null,
51 | downloadData: [],
52 | lang: 'English',
53 | };
54 |
55 | export default withLanguage(EmailDownload);
56 |
--------------------------------------------------------------------------------
/src/shared/LoadingAnimation.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const LoadingAnimation = (props) => {
5 | switch (props.size) {
6 | case 'small':
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
{props.message}
17 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
{props.message}
30 |
15 | {labelItems.map((item, index) => {
16 | const label = props.legendLabelFormatter(item.label);
17 | return (
26 |
33 |
43 |
44 | {label}
45 |
46 |
);
47 | })}
48 |
28 | {({ loading, error, data }) => {
29 | if (loading) return Error :(
;
33 | }
34 | return (
35 | {permitGroupParam && permitGroups.length === 1 &&
Module: {permitGroups[0]} }
36 | {permitGroupParam && permitGroups.length > 1 &&
Modules: {permitGroups.join(', ')} }
37 |
38 |
44 |
);
47 | };
48 |
49 | export default PermitDataQuery;
50 |
--------------------------------------------------------------------------------
/src/styles/components/multiSelect.scss:
--------------------------------------------------------------------------------
1 | .react-select-menu {
2 | background-color: #fff;
3 | border: 1px solid rgba(0,0,255,0.38);
4 | padding-left: 0px;
5 | div[role="option"] {
6 | padding-left: 18px;
7 | }
8 | div[role="option"]:hover {
9 | color: #fff;
10 | background-color: #2196F3;
11 | }
12 | .isSelected {
13 | color: red;
14 | }
15 | }
16 |
17 | .multiSelect {
18 | button {
19 | width: 100%;
20 | background: transparent;
21 | border: none;
22 | height: auto;
23 | min-height: 42px;
24 | text-align: left;
25 | padding-left: 18px;
26 | }
27 | button:focus {
28 | border: 1px solid #232436;
29 | border-radius: 2px;
30 | }
31 | button:after {
32 | content: '';
33 | float: right;
34 | margin-top: 16px;
35 | margin-right: -32px;
36 | border-top: 6px solid #7b8a8b;
37 | border-left: 3px solid transparent;
38 | border-right: 3px solid transparent;
39 | }
40 | &.form-control {
41 | padding: 0;
42 | height: auto;
43 | margin-bottom: 10px;
44 | }
45 | // &.form-control:last-of-type {
46 | // margin-bottom: 0px;
47 | // }
48 | &.form-control:focus {
49 | border: none;
50 | }
51 | }
52 |
53 | .react-select-option__checkbox {
54 | display: inline-block;
55 | }
56 |
57 | .react-select-option__label {
58 | display: inline-block;
59 | }
60 |
61 | .selectedMultiOption {
62 | display: inline-block;
63 | background-color: #E3F2FD;
64 | border: 1px solid #c2d7e7;
65 | border-radius: 2px;
66 | margin-right: 8px;
67 | margin-top: 6px;
68 | margin-bottom: 6px;
69 | padding-left: 5px;
70 | padding-right: 5px;
71 | padding-top: 2px;
72 | padding-bottom: 2px;
73 | }
74 |
75 | .multiSelectRefresh {
76 | float: right;
77 | margin-right:20px;
78 | margin-top:10px;
79 | }
--------------------------------------------------------------------------------
/.eslintrc-initial-version.json:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "env": {
5 | "browser": true,
6 | "node": true,
7 | "es6": true
8 | },
9 | "plugins": [
10 | "react",
11 | "jsx-a11y",
12 | "import"
13 | ],
14 | "rules": {
15 | "arrow-body-style": [
16 | 2,
17 | "as-needed"
18 | ],
19 | "comma-dangle": [
20 | 2,
21 | "always-multiline"
22 | ],
23 | "import/imports-first": 0,
24 | "import/newline-after-import": 0,
25 | "import/no-extraneous-dependencies": 2,
26 | "import/no-named-as-default": 0,
27 | "import/no-unresolved": 2,
28 | "import/prefer-default-export": 0,
29 | "indent": [
30 | 2,
31 | 2,
32 | {
33 | "SwitchCase": 1
34 | }
35 | ],
36 | "jsx-a11y/aria-props": 2,
37 | "jsx-a11y/heading-has-content": 0,
38 | "jsx-a11y/anchor-is-valid": 2,
39 | "jsx-a11y/label-has-for": 2,
40 | "jsx-a11y/mouse-events-have-key-events": 2,
41 | "jsx-a11y/role-has-required-aria-props": 2,
42 | "jsx-a11y/role-supports-aria-props": 2,
43 | "max-len": ["error", { "code": 100, "ignoreComments": true, "ignoreUrls": true, "ignoreStrings": true, "ignoreTemplateLiterals": true}],
44 | "newline-per-chained-call": 0,
45 | "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
46 | "no-use-before-define": 0,
47 | "prefer-template": 2,
48 | "quotes": [2, "single"],
49 | "react/jsx-filename-extension": 0,
50 | "react/jsx-no-target-blank": 0,
51 | "react/require-extension": 0,
52 | "react/self-closing-comp": 0,
53 | "react/sort-comp": [1, {
54 | "order": [
55 | "everything-else",
56 | "render"
57 | ]
58 | }],
59 | "require-yield": 0
60 | }
61 | }
--------------------------------------------------------------------------------
/src/styles/bootstrap/_grid.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Grid system
3 | // --------------------------------------------------
4 |
5 |
6 | // Container widths
7 | //
8 | // Set the container width, and override it for fixed navbars in media queries.
9 |
10 | .container {
11 | @include container-fixed;
12 |
13 | @media (min-width: $screen-sm-min) {
14 | width: $container-sm;
15 | }
16 | @media (min-width: $screen-md-min) {
17 | width: $container-md;
18 | }
19 | @media (min-width: $screen-lg-min) {
20 | width: $container-lg;
21 | }
22 | }
23 |
24 |
25 | // Fluid container
26 | //
27 | // Utilizes the mixin meant for fixed width containers, but without any defined
28 | // width for fluid, full width layouts.
29 |
30 | .container-fluid {
31 | @include container-fixed;
32 | }
33 |
34 | // Row
35 | //
36 | // Rows contain and clear the floats of your columns.
37 |
38 | .row {
39 | @include make-row;
40 | }
41 |
42 |
43 | // Columns
44 | //
45 | // Common styles for small and large grid columns
46 |
47 | @include make-grid-columns;
48 |
49 |
50 | // Extra small grid
51 | //
52 | // Columns, offsets, pushes, and pulls for extra small devices like
53 | // smartphones.
54 |
55 | @include make-grid(xs);
56 |
57 |
58 | // Small grid
59 | //
60 | // Columns, offsets, pushes, and pulls for the small device range, from phones
61 | // to tablets.
62 |
63 | @media (min-width: $screen-sm-min) {
64 | @include make-grid(sm);
65 | }
66 |
67 |
68 | // Medium grid
69 | //
70 | // Columns, offsets, pushes, and pulls for the desktop device range.
71 |
72 | @media (min-width: $screen-md-min) {
73 | @include make-grid(md);
74 | }
75 |
76 |
77 | // Large grid
78 | //
79 | // Columns, offsets, pushes, and pulls for the large desktop device range.
80 |
81 | @media (min-width: $screen-lg-min) {
82 | @include make-grid(lg);
83 | }
84 |
--------------------------------------------------------------------------------
/src/app/spatial_event_topic_summary/SpatialEventTopicLocationInfo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | // import Icon from '../../shared/Icon';
4 | // import { IM_SEARCH } from '../../shared/iconConstants';
5 | import { english } from './english';
6 | import { spanish } from './spanish';
7 | import { withLanguage } from '../../utilities/lang/LanguageContext';
8 |
9 | const SpatialEventTopicLocationInfo = (props) => {
10 | // set language
11 | let content;
12 | switch (props.language.language) {
13 | case 'Spanish':
14 | content = spanish;
15 | break;
16 | default:
17 | content = english;
18 | }
19 |
20 | let label;
21 | switch (props.spatialType) {
22 | case 'address':
23 | label = content.of;
24 | break;
25 | case 'neighborhood':
26 | label = content.in;
27 | break;
28 | case 'street':
29 | label = content.along;
30 | break;
31 | default:
32 | label = content.in;
33 | }
34 |
35 | return (
36 |
44 | );
45 | }
46 |
47 | SpatialEventTopicLocationInfo.propTypes = {
48 | spatialType: PropTypes.string.isRequired,
49 | spatialDescription: PropTypes.string.isRequired,
50 | columnClasses: PropTypes.string
51 | };
52 |
53 | SpatialEventTopicLocationInfo.defaultProps = {
54 | columnClasses: 'col-md-4 col-xs-12'
55 | };
56 |
57 | export default withLanguage(SpatialEventTopicLocationInfo);
58 |
--------------------------------------------------------------------------------
/src/app/climate/ClickableTile.js:
--------------------------------------------------------------------------------
1 | import { link } from "d3-shape";
2 | import React from "react";
3 |
4 | function ClickableTile({ image, url, text }) {
5 | const tileRef = React.useRef();
6 | const linkRef = React.useRef();
7 |
8 | function handleClick(e) {
9 | if (e.button === 0) {
10 | if (!e.target.matches(".card-link-action")) {
11 | linkRef.current.click();
12 | }
13 | }
14 | }
15 |
16 | return (
17 |
68 | );
69 | }
70 |
71 | export default ClickableTile;
72 |
--------------------------------------------------------------------------------
/src/utilities/counterSet.js:
--------------------------------------------------------------------------------
1 | export default class CounterSet {
2 |
3 | constructor(counters) {
4 | this.counters = {};
5 | if (counters) {
6 | counters.forEach((counter) => {
7 | if (typeof counter === 'string') {
8 | this.counters[counter] = { type: 'simple', total: 0 };
9 | } else {
10 | this.counters[counter.name] = { type: counter.type, total: 0, count: [], stats: [0, 0, 0] };
11 | }
12 | });
13 | }
14 | }
15 |
16 | createCounter(name, type = 'simple') {
17 | if (type === 'simple') {
18 | if (!(name in this.counters)) this.counters[name] = { type: 'simple', total: 0 };
19 | } else if (!(name in this.counters)) {
20 | this.counters[name] = { type: 'full', total: 0, count: [], stats: [0, 0, 0] };
21 | }
22 | }
23 |
24 | getValue(name) {
25 | if (name in this.counters) {
26 | return this.counters[name].total;
27 | }
28 | return null;
29 | }
30 |
31 | getStats(name) {
32 | if (name in this.counters && this.counters[name].type === 'full') {
33 | return this.counters[name].stats;
34 | }
35 | return null;
36 | }
37 |
38 | incrementCounter(name, inc = 1) {
39 | if (!(name in this.counters)) this.createCounter(name);
40 | this.counters[name].total += inc;
41 | if (this.counters[name].type === 'full') {
42 | this.counters[name].count.push(inc);
43 | }
44 | }
45 |
46 | finalizeCounter(name) {
47 | if ('count' in this.counters[name] && this.counters[name].count.length > 0) {
48 | this.counters[name].count.sort((val1, val2) => (Number(val1) - Number(val2)));
49 | this.counters[name].stats = [
50 | this.counters[name].count[Math.floor(this.counters[name].count.length / 2)],
51 | this.counters[name].count[0],
52 | this.counters[name].count[this.counters[name].count.length - 1],
53 | ];
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/shared/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const getButtonClass = (size, type, active) => {
5 | const typeStr = [' btn', type].join('-');
6 | switch (size) {
7 | case 'sm':
8 | return ['btn', ' btn-sm', typeStr, active ? ' active' : ''].join('');
9 | case 'xs':
10 | return ['btn', ' btn-xs', typeStr, active ? ' active' : ''].join('');
11 | default:
12 | return ['btn', typeStr, active ? ' active' : ''].join('');
13 | }
14 | };
15 |
16 | const getButtonStyle = (positionInGroup, extraStyle) => {
17 | switch (positionInGroup) {
18 | case 'left':
19 | return { borderTopRightRadius: '0px', borderBottomRightRadius: '0px', ...extraStyle };
20 | case 'right':
21 | return { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px', ...extraStyle };
22 | case 'middle':
23 | return { borderTopRightRadius: '0px', borderBottomRightRadius: '0px', borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px', ...extraStyle };
24 | default:
25 | return extraStyle;
26 | }
27 | };
28 |
29 | const Button = props => (
30 |
35 | {props.children}
36 |
37 | );
38 |
39 | Button.propTypes = {
40 | size: PropTypes.string,
41 | type: PropTypes.string,
42 | style: PropTypes.object,
43 | children: PropTypes.node,
44 | onClick: PropTypes.func,
45 | active: PropTypes.bool,
46 | positionInGroup: PropTypes.string,
47 | };
48 |
49 | Button.defaultProps = {
50 | size: 'regular',
51 | type: 'primary',
52 | active: false,
53 | disabled: false,
54 | positionInGroup: null, // left, middle, right
55 | onClick: null,
56 | style: {},
57 | children: undefined,
58 | };
59 |
60 | export default Button;
61 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_alerts.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Alerts
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // -------------------------
8 |
9 | .alert {
10 | padding: $alert-padding;
11 | margin-bottom: $line-height-computed;
12 | border: 1px solid transparent;
13 | border-radius: $alert-border-radius;
14 |
15 | // Headings for larger alerts
16 | h4 {
17 | margin-top: 0;
18 | // Specified for the h4 to prevent conflicts of changing $headings-color
19 | color: inherit;
20 | }
21 |
22 | // Provide class for links that match alerts
23 | .alert-link {
24 | font-weight: $alert-link-font-weight;
25 | }
26 |
27 | // Improve alignment and spacing of inner content
28 | > p,
29 | > ul {
30 | margin-bottom: 0;
31 | }
32 |
33 | > p + p {
34 | margin-top: 5px;
35 | }
36 | }
37 |
38 | .alert-sm {
39 | padding: $alert-padding * 0.6;
40 | }
41 |
42 | // Dismissible alerts
43 | //
44 | // Expand the right padding and account for the close button's positioning.
45 |
46 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
47 | .alert-dismissible {
48 | padding-right: ($alert-padding + 20);
49 |
50 | // Adjust close link position
51 | .close {
52 | position: relative;
53 | top: -2px;
54 | right: -21px;
55 | color: inherit;
56 | }
57 | }
58 |
59 | // Alternate styles
60 | //
61 | // Generate contextual modifier classes for colorizing the alert.
62 |
63 | .alert-success {
64 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
65 | }
66 |
67 | .alert-info {
68 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
69 | }
70 |
71 | .alert-warning {
72 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
73 | }
74 |
75 | .alert-danger {
76 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/address/english.js:
--------------------------------------------------------------------------------
1 | export const english = {
2 | address: 'Address',
3 | addresses_by_street_filename: 'addresses_by_street.csv',
4 | addresses_by_neighborhood_filename: 'addresses_by_neighborhood.csv',
5 | address_and_owner_mailing_lists: 'Address & Owner Mailing Lists',
6 | about_this_address: 'About this address',
7 | back_to_neighborhood: 'Back to neighborhood',
8 | back_to_place_matches: 'Back to place matches',
9 | back_to_street: 'Back to street',
10 | back_to_search: 'Back to search',
11 | brush_collection: 'Brush Collection',
12 | brush_week: 'Brush Week',
13 | data_type: 'Address',
14 | every: 'Every',
15 | historic_district: 'Historic district',
16 | list_view: 'List view',
17 | local_landmark: 'Local landmark',
18 | map_view: 'Map view',
19 | neighborhood: 'Neighborhood',
20 | no_neighborhood_name: 'No neighborhood name',
21 | climate: ' Climate Threats and Vulnerability',
22 | no_climate: 'Unknown Census Block Group',
23 | no_city_pickup: 'No city pickup',
24 | no_information_available: 'No information available',
25 | no_results_found: 'No results found',
26 | of_next_week: 'of next week',
27 | of_this_week: 'of this week',
28 | owner: 'Owner',
29 | placeholder: 'Search...',
30 | place_on_curb_by_7am_monday: 'Place on curb by 7am Monday',
31 | property_information: 'Property information',
32 | recycle_week: 'Recycle Week',
33 | recycling_collection: 'Recycling collection',
34 | report_with_the_asheville_app: 'Report with the Asheville App',
35 | sometime_this_week: 'Sometime this week',
36 | sometime_next_week: 'Sometime next week',
37 | street: 'Street',
38 | street_maintenance: 'Street Maintenance',
39 | trash_collection: 'Trash Collection',
40 | weekdays: {
41 | MONDAY: 'MONDAY',
42 | TUESDAY: 'TUESDAY',
43 | WEDNESDAY: 'WEDNESDAY',
44 | THURSDAY: 'THURSDAY',
45 | FRIDAY: 'FRIDAY',
46 | SATURDAY: 'SATURDAY',
47 | SUNDAY: 'SUNDAY',
48 | },
49 | zoning: 'Zoning',
50 | };
51 |
--------------------------------------------------------------------------------
/src/shared/DetailsTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import AccessibleReactTable from 'accessible-react-table';
4 |
5 | const DetailsTable = (props) => {
6 | const numColumns = props.columns.length;
7 | const colWidth = Math.floor(12 / numColumns);
8 |
9 | return (
10 |
11 | {props.hasTitle &&
12 |
13 | {props.hasTitleIcon &&
14 | props.titleIcon
15 | } {props.title}
16 |
17 | }
18 |
29 |
21 | {subLabelsArrays.map((values, i) => (
22 |
23 | {values.map((value, j) => (
24 |
27 | ))}
28 |
30 | {
34 | e.preventDefault();
35 | this.props.onNodeClick(this.props.node);
36 | }}
37 | style={{
38 | color: color,
39 | width: '100%',
40 | }}
41 | role="button"
42 | >
43 | ✓
44 | {this.props.node.key}
45 |
46 | {this.props.node.values &&(
47 |
51 | {this.props.node.values.map((child) => {
52 | return (
60 | )}
61 |
62 | )
63 | }
64 | }
65 |
66 | export default ChildMenus;
67 |
--------------------------------------------------------------------------------
/src/app/search/searchByEntities/SearchByEntity.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Icon from '../../../shared/Icon';
4 | import { IM_SHIELD3, IM_OFFICE, IM_ROAD, IM_USER, IM_USERS, IM_LOCATION, IM_HOME2, IM_QUESTION, IM_ARROW_RIGHT2, IM_GOOGLE, IM_LIBRARY2 } from '../../../shared/iconConstants';
5 | import styles from './searchByEntities.css';
6 |
7 | const getIcon = (entityType) => {
8 | switch (entityType) {
9 | case 'neighborhood':
10 | return props.onClick(props.entity.type)}>
30 |
33 | {props.entity.label}
34 |
35 |
36 | );
37 |
38 | const entityDataShape = {
39 | label: PropTypes.string,
40 | type: PropTypes.string,
41 | checked: PropTypes.bool,
42 | };
43 |
44 | SearchByEntity.propTypes = {
45 | entity: PropTypes.shape(entityDataShape).isRequired,
46 | onClick: PropTypes.func,
47 | };
48 |
49 | export default SearchByEntity;
50 |
51 |
--------------------------------------------------------------------------------
/src/app/development/permits/PermitsMap.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import gql from 'graphql-tag';
4 | import { Query } from 'react-apollo';
5 | import { combinePolygonsFromNeighborhoodList } from '../../../utilities/mapUtilities';
6 | import Map from '../../../shared/visualization/Map';
7 | import LoadingAnimation from '../../../shared/LoadingAnimation';
8 |
9 | const GET_NEIGHBORHOODS = gql`
10 | query getNeighborhoodsQuery {
11 | neighborhoods {
12 | name
13 | nbhd_id
14 | abbreviation
15 | narrative
16 | polygon {
17 | outer {
18 | points {
19 | x
20 | y
21 | }
22 | }
23 | holes {
24 | points {
25 | x
26 | y
27 | }
28 | }
29 | }
30 | }
31 | }
32 | `;
33 |
34 | function PermitMap({
35 | permitData,
36 | centerCoords,
37 | zoom,
38 | showNeighborhoods,
39 | }) {
40 | if (!showNeighborhoods) {
41 | return (
53 | {({ loading, error, data }) => {
54 | if (loading) return Error :(
;
58 | }
59 | return (
70 | );
71 | };
72 |
73 | PermitMap.propTypes = {
74 | permitData: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
75 | centerCoords: PropTypes.arrayOf(PropTypes.number).isRequired,
76 | zoom: PropTypes.number,
77 | showNeighborhoods: PropTypes.bool,
78 | };
79 |
80 | PermitMap.defaultProps = {
81 | zoom: 12,
82 | showNeighborhoods: false,
83 | };
84 |
85 | export default PermitMap;
86 |
--------------------------------------------------------------------------------
/src/app/development/volume/PermitVolCirclepack.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ResponsiveNetworkFrame } from 'semiotic';
4 | import Tooltip from '../../../shared/visualization/Tooltip';
5 |
6 |
7 | const PermitVolCirclepack = props => (
8 | ({
19 | stroke: d.color,
20 | fill: d.color,
21 | })}
22 | nodeIDAccessor="key"
23 | hoverAnnotation
24 | // customHoverBehavior={d => {
25 | // if (!d) {
26 | // this.setState({
27 | // hoverNode: null,
28 | // });
29 | // return;
30 | // }
31 | // this.setState({
32 | // hoverNode: d.id,
33 | // });
34 | // }}
35 | networkType={{
36 | type: 'circlepack',
37 | hierarchyChildren: d => d.values,
38 | hierarchySum: d => d.value,
39 | // array of data has to be { key: root, values: [...] }
40 | }}
41 | // customClickBehavior={(d) => {
42 | // props.onCircleClick(d.values)
43 | // }}
44 | nodeLabels={(d) => {
45 | if (d.key === 'root' || d.r < 12) { return null; }
46 | return (
51 | {d.value}
52 | );
53 | }}
54 | tooltipContent={(d) => {
55 | if (d.key === 'root') {
56 | return '';
57 | }
58 | const heritage = d.heritage.slice(1);
59 | heritage.push(d.key);
60 | const title = heritage.join(' > ');
61 | return d.key === 'root' ? '' : (
62 |
47 |
{
50 | e.preventDefault();
51 | this.setState({ open: !this.state.open })
52 | }}
53 | >
54 | Filter Record Types
55 |
59 |
63 | {this.props.hierarchy.values.map(node => (
64 |
72 |
58 |
63 | )
64 |
65 | const calculatedPiece = {
66 | o: key,
67 | xy,
68 | piece,
69 | renderElement: renderElementObject
70 | }
71 | return calculatedPiece
72 | })
73 | allCalculatedPieces = [...allCalculatedPieces, ...calculatedPieces]
74 | })
75 | return allCalculatedPieces
76 | }
77 |
--------------------------------------------------------------------------------
/src/utilities/dateUtilities.js:
--------------------------------------------------------------------------------
1 | // TODO: convert to functions
2 |
3 |
4 | class DateUtilities {
5 | // Returns the ISO week of the date. From https://weeknumber.net/how-to/javascript
6 | getWeek(dd) {
7 | const date = new Date(dd.getTime());
8 | date.setHours(0, 0, 0, 0);
9 | // Thursday in current week decides the year.
10 | date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); // eslint-disable-line no-mixed-operators
11 | // January 4 is always in week 1.
12 | const week1 = new Date(date.getFullYear(), 0, 4);
13 | // Adjust to Thursday in week 1 and count number of weeks from date to week1.
14 | return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 // eslint-disable-line no-mixed-operators
15 | - 3 + (week1.getDay() + 6) % 7) / 7); // eslint-disable-line no-mixed-operators
16 | }
17 |
18 | // Returns the four-digit year corresponding to the ISO week of the date.
19 | getWeekYear(dd) {
20 | const date = new Date(dd.getTime());
21 | date.setDate((date.getDate() + 3) - (date.getDay() + 6) % 7); // eslint-disable-line no-mixed-operators
22 | return date.getFullYear();
23 | }
24 |
25 | dateIndex(date, mode) {
26 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
27 | const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
28 | let idx = null;
29 | if (mode === 'month') {
30 | const m = date.getMonth();
31 | idx = { index: m, value: months[m] };
32 | } else if (mode === 'week') {
33 | const week = this.getWeek(date);
34 | const dd = new Date(date.getTime());
35 | dd.setHours(0, 0, 0, 0);
36 | dd.setDate(dd.getDate() - (dd.getDay() + 6) % 7); // eslint-disable-line no-mixed-operators
37 | idx = { index: week, value: months[dd.getMonth()] };
38 | } else if (mode === 'day-of-week') {
39 | const day = date.getDay();
40 | idx = { index: day, value: days[day] };
41 | }
42 | return idx;
43 | }
44 |
45 | inDateRange(inDate, start, end) {
46 | let inRange = true;
47 | const date = new Date(inDate).getTime();
48 | if ((start && date < start.getTime()) ||
49 | (end && date > end.getTime())) {
50 | inRange = false;
51 | }
52 | return inRange;
53 | }
54 | }
55 |
56 | export default new DateUtilities();
57 |
--------------------------------------------------------------------------------
/src/app/development/volume/PermitTypeMenus.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 |
5 | const PermitTypeMenus = props => (
6 |
7 | {props.parentHierarchyLevels.map((level, levelIndex, array) => {
8 | // If the level before it has no selection, don't show it
9 | if (levelIndex > 0 && array[levelIndex - 1].selectedCat === null) {
10 | return null;
11 | }
12 | let keyLevel = props.wholeHierarchy;
13 | for (let index = 0; index < levelIndex; index++) {
14 | keyLevel = keyLevel[array[index].selectedCat];
15 | }
16 | /*
17 | * If the value is not null, make it a selected dropdown
18 | * If someone changes the selected dropdown of
19 | * one earlier in the array, the later one's value should be cleared
20 | */
21 | const orderedKeys = Object.keys(keyLevel).sort((a, b) => {
22 | if (a > b) {
23 | return 1;
24 | } else if (a < b) {
25 | return -1;
26 | }
27 | return 0;
28 | });
29 |
30 | return (
39 |
40 | {`${level.name.replace('_', ' ')}: `}
41 |
42 |
props.onSelect(e, levelIndex)}
45 | value={level.selectedCat || 'null'}
46 | >
47 | All
48 | {orderedKeys.map(key => (
49 |
53 | {key}
54 |
55 | ))}
56 |
57 |
);
58 | })}
59 |
26 |
Entities to search by
27 |
28 | {props.entities.map((entity, i) => (
29 |
30 | refreshLocation(getNewUrlParams(entity.type), props.location)} />
31 |
32 | ))}
33 |
34 |
37 |
41 |
{subTitle}
42 |
43 |
Daily
44 |
49 |
50 |
{`Total: ${totalCount}`}
51 | {props.selectedNodes ?
52 | (
this.onModalOpen(circleData)}
56 | />) :
57 |
60 |
61 |
62 |
Online vs In Person
63 | {/* Make shared extent with FacetController after issue is fixed */}
64 | {props.selectedNodes ?
65 | ( !node.othered)}
69 | />) :
70 |
73 |
})