Improve wording

frontend/src/app/components/multi-tag-select/multi-tag-select.component.html

@@ -1,5 +1,5 @@
 <mat-chip-list>
   <!--suppress AngularInvalidExpressionResultType -->
   <mat-chip (click)="onChipClick(tag)" *ngFor="let tag of availableTags" [color]="isSelected(tag) ? 'accent' : 'none'"
-            selected>{{tag}}</mat-chip>
+            selected>{{tag|translate}}</mat-chip>
 </mat-chip-list>

frontend/src/app/components/result/result.component.html

@@ -17,6 +17,7 @@
     </div>
     <mat-divider *ngIf="result.scores.length > 0"></mat-divider>
     <div class="searched-params">
+      <div class="result-desc">Estimated values for your chosen travel dates</div>
       <table>
         <tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
           <td>
@@ -27,7 +28,7 @@
           </td>
           <td>
             <div class="cell right">
-              <span>{{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}}</span>
+              <span>{{score.value != undefined ? (score.value|number:PROPERTY_VIS_DEF[score.type].decimals) : 'N/A'}}</span>
             </div>
           </td>
           <td>

frontend/src/app/components/result/result.component.scss

@@ -67,6 +67,17 @@
     .undefined {
       color: #8f8f8f;
     }
+
+    .result-desc {
+      text-transform: uppercase;
+      font-size: small;
+      margin-right: 0.25rem;
+      margin-bottom: 0.5rem;
+      overflow-y: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
   }
 }
 

frontend/src/app/components/search-input/search-input.component.html

@@ -10,7 +10,7 @@
       <mat-vertical-stepper>
         <!--  Date input  -->
         <mat-step>
-          <ng-template matStepLabel>When is your trip?</ng-template>
+          <ng-template matStepLabel>When do you want to travel?</ng-template>
           <div class="vertical-wrap">
             <mat-form-field appearance="outline">
               <mat-label>Start</mat-label>
@@ -24,7 +24,7 @@
         </mat-step>
         <!--  Multi presets  -->
         <mat-step>
-          <ng-template matStepLabel>Which climate would you prefer?</ng-template>
+          <ng-template matStepLabel>Which climate makes you feel comfortable?</ng-template>
           <div *ngFor="let key of multiPresetsKeys" class="sub-group">
             <span class="label">{{key|translate}}:</span><br>
             <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
@@ -89,14 +89,17 @@
       </section>
       <!--   Climate Params   -->
       <section class="group">
-        <span class="title">Climate</span>
+        <span class="title small-bottom-margin">Climate</span>
-        <app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Max Temp'" [max]="45" [min]="0"></app-toggle-slider>
+        <span class="desc">Choose your sweetspot</span>
+        <app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45"
+                           [min]="0"></app-toggle-slider>
         <app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500"
                            [min]="0"></app-toggle-slider>
       </section>
       <!--   Financial   -->
       <section class="group">
-        <span class="title">Fincancial</span>
+        <span class="title small-bottom-margin">Fincancial</span>
+        <span class="desc">Choose your sweetspot</span>
         <app-toggle-slider [(model)]="accommodation" [label]="'Accommodation'" [max]="60" [min]="0"></app-toggle-slider>
       </section>
     </mat-tab>

frontend/src/app/components/search-input/search-input.component.scss

@@ -83,3 +83,10 @@
   }
 }
 
+.desc {
+  font-size: smaller;
+}
+
+.small-bottom-margin {
+  margin-bottom: 0.4rem !important;
+}

frontend/src/app/containers/region-details/region-details.component.html

@@ -27,40 +27,27 @@
     <mat-tab-group>
       <mat-tab *ngIf="region.avg_price_relative" label="Price Deviation">
         <ng-template matTabContent>
-          <app-graph
+          <app-graph [monthlyDatas]="[region.avg_price_relative]" class="graph" formatSting="##,##%" graphType="column">
-            [monthlyDatas]="[region.avg_price_relative]"
-            class="graph"
-            formatSting="##,##%"
-            graphType="column">
           </app-graph>
         </ng-template>
       </mat-tab>
       <mat-tab *ngIf="region.temperature_mean_max && region.temperature_mean_max[0]" label="Temperatures">
         <ng-template matTabContent>
-          <app-graph [colors]="['blue', 'red']"
+          <app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
-                     [labels]="['Min', 'Max']"
+                     [monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"
-                     [monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]"
-                     class="graph"
                      formatSting="##,##°C">
           </app-graph>
         </ng-template>
       </mat-tab>
       <mat-tab *ngIf="region.precipitation && region.precipitation[0]" label="Precipitation">
         <ng-template matTabContent>
-          <app-graph
+          <app-graph [monthlyDatas]="[region.precipitation]" class="graph" formatSting="####mm">
-            [monthlyDatas]="[region.precipitation]"
-            class="graph"
-            formatSting="####mm">
           </app-graph>
         </ng-template>
       </mat-tab>
       <mat-tab *ngIf="region.rain_days && region.rain_days[0]" label="Rain days">
         <ng-template matTabContent>
-          <app-graph
+          <app-graph [monthlyDatas]="[region.rain_days]" class="graph" formatSting="####" graphType="column">
-            [monthlyDatas]="[region.rain_days]"
-            class="graph"
-            formatSting="####"
-            graphType="column">
           </app-graph>
         </ng-template>
       </mat-tab>

frontend/src/app/containers/search/search.component.ts

@@ -53,8 +53,8 @@ export class SearchComponent implements OnInit {
 
       this.sortOptions = [
         {name: 'Relevance', property: 'score', descending: true},
-        {name: 'Name', property: 'name'},
+        {name: 'Region name', property: 'name'},
-        {name: 'Accommodation', property: 'accommodation_costs'}
+        {name: 'Accommodation price', property: 'accommodation_costs'}
       ];
 
       if (this.results.length > 0) {

frontend/src/app/services/data.service.ts

@@ -90,60 +90,144 @@ export class DataService {
 export const REGION_PARAM_VIS: RegionParamVisLookup = {
   temperature_mean: {
     icon: 'wb_sunny',
-    unit: '°C'
+    unit: '°C',
+    decimals: '1.0-0'
   },
   temperature_mean_min: {
     icon: 'wb_sunny',
-    unit: '°C'
+    unit: '°C',
+    decimals: '1.0-0'
   },
   temperature_mean_max: {
     icon: 'wb_sunny',
-    unit: '°C'
+    unit: '°C',
+    decimals: '1.0-0'
   },
   precipitation: {
     icon: 'opacity',
-    unit: 'mm'
+    unit: 'mm',
+    decimals: '1.0-0'
   },
   humidity: {
     icon: 'grain',
-    unit: '%'
+    unit: '%',
+    decimals: '1.0-0'
   },
   sun_hours: {
     icon: 'flare',
-    unit: 'h'
+    unit: 'h',
+    decimals: '1.0-0'
   },
   rain_days: {
     icon: 'date_range',
-    unit: ''
+    unit: '',
+    decimals: '1.0-0'
   },
   food_costs: {
     icon: 'local_dining',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.0-0'
   },
   alcohol_costs: {
     icon: 'local_bar',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.2-2'
   },
   water_costs: {
     icon: 'local_cafe',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.2-2'
   },
   local_transportation_costs: {
     icon: 'commute',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.2-2'
   },
   entertainment_costs: {
     icon: 'local_activity',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.2-2'
   },
   accommodation_costs: {
     icon: 'hotel',
-    unit: '€/day'
+    unit: '€/day',
+    decimals: '1.2-2'
   },
   average_per_day_costs: {
     icon: 'euro',
-    unit: '€/day'
+    unit: '€/day',
-  }
+    decimals: '1.2-2'
+  },
+  avg_price_relative: {
+    icon: 'hotel',
+    unit: '%',
+    decimals: '1.1-1'
+  },
+  beach: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  history: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  nature: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  art: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  culture: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  mountains: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  architecture: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  rainforest: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  nightlife: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  desert: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  food: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  shopping: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
+  volcanoes: {
+    icon: 'stars',
+    unit: '%',
+    decimals: '1.0-0'
+  },
 };
 
 export interface RegionParamVisLookup {
@@ -153,4 +237,5 @@ export interface RegionParamVisLookup {
 export interface RegionParamVis {
   icon: string;
   unit: string;
+  decimals: string;
 }

frontend/src/assets/i18n/en.json

@@ -1,33 +1,48 @@
 {
-  "temperature_mean_max": "Max Temperature Average",
+  "temperature_mean_max": "Day temperature",
   "temperature": "Temperature",
-  "rain_days": "Rainy days",
+  "rain_days": "Rain days",
-  "sun_hours": "Sunny hours",
+  "sun_hours": "Sunshine",
   "precipitation": "Precipitation",
   "humidity": "Humidity",
   "alcohol_costs": "Alcohol",
   "food_costs": "Food",
   "water_costs": "Water",
-  "cheap_alcohol": "Cheap alcohol",
+  "cheap_alcohol": "cheap alcohol",
   "local_transportation_costs": "Public transport",
   "average_per_day_costs": "Total costs",
   "entertainment_costs": "Entertainment",
-  "accommodation_costs": "Accommodation",
+  "accommodation_costs": "Accommodation price",
-  "cheap_food": "Cheap food",
+  "avg_price_relative": "Price tendency",
-  "cheap_water": "Cheap water",
+  "cheap_food": "cheap food",
-  "cheap_transportations": "Cheap public transport",
+  "cheap_water": "cheap water",
-  "cheap_entertainment": "Cheap entertainment",
+  "cheap_transportations": "cheap public transport",
-  "cheap_accommodation": "Cheap accommodation",
+  "cheap_entertainment": "cheap entertainment",
-  "off_season": "Off-season",
+  "cheap_accommodation": "cheap accommodation",
+  "off_season": "low season",
   "warm": "warm",
   "chilly": "cold",
   "mild:": "mild",
   "cold": "freezing",
-  "sunny": "sunny",
+  "sunny": "all day long",
-  "dark": "dark",
+  "dark": "the sun scares me",
-  "almost_no_rain": "almost none",
+  "normal": "better not so much",
-  "little_rain": "little",
+  "almost_no_rain": "no rain",
-  "floodlike_rain": "flooding",
+  "little_rain": "a little is good",
+  "floodlike_rain": "i like it pouring",
   "few_raindays": "few",
-  "many_raindays": "many"
+  "many_raindays": "many",
+  "art": "Art",
+  "beach": "Beach",
+  "history": "History",
+  "nature": "Nature",
+  "culture": "Culture",
+  "mountains": "Mountains",
+  "architecture": "Architecture",
+  "rainforest": "Rainforest",
+  "desert": "Desert",
+  "food": "Food",
+  "shopping": "Shopping",
+  "volcanoes": "Volcanoes",
+  "nightlife": "Nightlife"
 }